feat(segment): prepare segment expand style (#36)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: rdlabo

README.md

@@ -55,6 +55,14 @@ To customize the library's default styles to match your design, several CSS vari
 
 https://github.com/rdlabo-team/ionic-theme-ios26/blob/main/src/default-variables.scss
 
+
+### Additional Customization
+
+To achieve higher fidelity to iOS26 design, you can implement additional customizations provided by this library. For more details, please visit:
+
+https://ionic-theme-ios26.netlify.app/main/docs
+
+
 ### Liquid Glass Mixin
 
 Import the SCSS files from the main package to use the liquid glass mixin.
@@ -67,6 +75,7 @@ ion-textarea label.textarea-wrapper {
 }
 ```
 
+
 ## Features
 
 ### `.ios26-disabled` Class
@@ -124,21 +133,6 @@ You can see the difference in the following video. The first example shows `ion-
 
 This is a known issue that has been shared with the Ionic team. We will update this library accordingly once Ionic Core addresses it.
 
-### Brightness Colors for Better Visual Quality
-
-In iOS26, the Submit button uses text and border colors slightly brighter than the base color.
-This effect can't be achieved by simply transforming existing palette colors, so separate colors are needed. You don't have to define them—the design will still work—but adding them can give more refined color results.
-
-```diff
-  :root {
-+   --ion-color-primary-brightness: #96FEFF; /* example color */
-+   --ion-color-secondary-brightness: [your brightness color];
-+   --ion-color-tertiary-brightness: [your brightness color];
-+   --ion-color-success-brightness: [your brightness color];
-+   --ion-color-warning-brightness: [your brightness color];
-+   --ion-color-danger-brightness: [your brightness color];
-  }
-```
 
 ## Migration Support
 

demo/e2e/screenshot.spec.ts-snapshots/modal-sheet-dark.png

@@ -14,19 +14,15 @@
       <ion-title size="large">Docs</ion-title>
     </ion-toolbar>
   </ion-header>
-  <section class="ion-padding-start ion-padding-end">
+  <section class="ion-padding-start ion-padding-end ion-padding-bottom">
     <p>This is a demo of the iOS26 theme for Ionic Framework. Just import the CSS and start using it immediately.</p>
     <code class="code-block">% npm install &#64;rdlabo/ionic-theme-ios26 --save</code>
     <p>For detailed usage instructions, please refer to the README in the GitHub repository.</p>
-    <ion-button color="dark" href="https://github.com/rdlabo-team/ionic-theme-ios26">
-      <ion-icon name="logo-github" slot="start"></ion-icon>
-      GitHub
-    </ion-button>
   </section>
 
   <ion-list [inset]="true">
     <ion-list-header><ion-label>Special Coding</ion-label><ion-note>Mode more iOS26</ion-note></ion-list-header>
-    <ion-item-group>
+    <ion-item-group class="ion-margin-bottom">
       <ion-item>
         <div>
           <h3><code>ion-button[fill=solid][type=submit]</code></h3>
@@ -43,5 +39,23 @@ <h3><code>ion-button[fill=solid][type=submit]</code></h3>
         </div>
       </ion-item>
     </ion-item-group>
+
+    <ion-item-group>
+      <ion-item>
+        <div class="ion-padding-bottom">
+          <h3><code>ion-segment.segment-expand</code></h3>
+          <p>To make segments span the full width, you need to apply a special class.</p>
+          <code class="code-block ion-margin-bottom">&lt;ion-segment class="segment-expand"&gt;&lt;/ion-segment&gt;</code>
+          <ion-segment value="default" class="segment-expand">
+            <ion-segment-button value="default">
+              <ion-label>New</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="segment">
+              <ion-label>Replied</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </div>
+      </ion-item>
+    </ion-item-group>
   </ion-list>
 </ion-content>

demo/e2e/screenshot.spec.ts-snapshots/segment-dark.png

@@ -8,9 +8,11 @@ import {
   IonHeader,
   IonIcon,
   IonItem,
-  IonItemGroup,
   IonLabel,
   IonList,
+  IonSegment,
+  IonSegmentButton,
+  IonItemGroup,
   IonListHeader,
   IonNote,
   IonTitle,
@@ -34,6 +36,9 @@ import {
     IonButtons,
     IonList,
     IonItem,
+    IonSegment,
+    IonLabel,
+    IonSegmentButton,
     IonListHeader,
     IonLabel,
     IonNote,

demo/e2e/screenshot.spec.ts-snapshots/segment.png

@@ -12,6 +12,16 @@
     </ion-segment>
     <ion-back-button slot="end" defaultHref="/main/index" style="visibility: hidden"></ion-back-button>
   </ion-toolbar>
+  <ion-toolbar>
+    <ion-segment value="default" class="segment-expand">
+      <ion-segment-button value="default">
+        <ion-label>New</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="segment">
+        <ion-label>Replied</ion-label>
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true" color="light">

demo/src/app/docs/docs-page.component.html

@@ -1,52 +1,63 @@
 @use '../utils/api';
 
-ion-toolbar.ios:not(.ios26-disabled) {
-  ion-segment {
-    @include api.glass-background;
-    min-height: 48px;
-    border-radius: 25px;
-
-    transition: transform var(--ios26-activated-transition-duration) ease-out;
-    will-change: transform;
-
-    &.in-toolbar-color:not(.in-segment-color) {
-      ion-segment-button:not(.segment-button-checked)::part(native) {
-        color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1) !important;
-      }
+ion-segment.ios:not(.ios26-disabled) {
+  @include api.glass-background;
+  min-height: 48px;
+  border-radius: 25px;
+
+  &.segment-expand {
+    min-height: 24px;
+    width: calc(100% - var(--ion-safe-area-left, 0) - var(--ion-safe-area-left, 0) - 24px);
+
+    &.segment-activated {
+      transform: scale(1);
     }
 
     ion-segment-button {
-      --border-width: 0;
-      --ion-color-base: var(--ion-text-color, #000);
-      --padding-start: 8px;
-      --padding-end: 8px;
-      min-width: 60px;
-      margin: 3px 2px;
-      font-size: 14.5px;
+      min-height: 24px;
+    }
+  }
 
-      &::part(indicator-background) {
-        border-radius: 25px;
-        box-shadow: none;
-        transition: background 0.2s ease;
-        background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
-      }
+  transition: transform var(--ios26-activated-transition-duration) ease-out;
+  will-change: transform;
+
+  &.in-toolbar-color:not(.in-segment-color) {
+    ion-segment-button:not(.segment-button-checked)::part(native) {
+      color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1) !important;
     }
+  }
 
-    &.segment-activated {
-      transform: scale(1.1);
-
-      ion-segment-button {
-        transition: transform 100ms ease-out;
-        &.segment-button-checked::part(native) {
-          transform: scale(1.08);
-        }
-        &::part(indicator-background) {
-          position: relative;
-          z-index: 1;
-          background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0);
-          transform: scale(1.1);
-          transform-origin: center center;
-        }
+  ion-segment-button {
+    --border-width: 0;
+    --ion-color-base: var(--ion-text-color, #000);
+    --padding-start: 8px;
+    --padding-end: 8px;
+    min-width: 60px;
+    margin: 3px 2px;
+    font-size: 14.5px;
+
+    &::part(indicator-background) {
+      border-radius: 25px;
+      box-shadow: none;
+      transition: background 0.2s ease;
+      background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
+    }
+  }
+
+  &.segment-activated {
+    transform: scale(1.1);
+
+    ion-segment-button {
+      transition: transform 100ms ease-out;
+      &.segment-button-checked::part(native) {
+        transform: scale(1.08);
+      }
+      &::part(indicator-background) {
+        position: relative;
+        z-index: 1;
+        background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0);
+        transform: scale(1.1);
+        transform-origin: center center;
       }
     }
   }

demo/src/app/docs/docs-page.component.ts

@@ -21,7 +21,7 @@ ion-header.ios.header-collapse-condense:not(.ios26-disabled) ion-toolbar:not(.io
   padding-top: 0;
 }
 
-ion-toolbar.ios:not(.toolbar-title-large):not(.ios26-disabled) {
+ion-toolbar.ios:not(.toolbar-title-large):not(.ios26-disabled):not(:has(ion-segment.segment-expand)) {
   --min-height: 68px;
 }