@rdlabo/ionic-theme-ios27 1.0.1 → 1.0.3-beta.pr197.shaddcc0eacc313

package/docs/special-markup.md

@@ -92,7 +92,16 @@ This is an introductory group. Place regular list items in a separate `ion-item-
 
 ## Full-width segments
 
-For colored segments, use Ionic's `color` property (for example, `color="primary"` or `color="secondary"`). The selected surface uses the palette's base color and the selected label uses its contrast color. The optional moving glass inherits the same surface color; custom Ionic palettes work without additional registration.
+Add `.segment-style-glass` to give a segment the same glass surface and selected indicator treatment as the tab bar. The class preserves the segment's existing dimensions and text colors, supports scrollable segments, and respects Ionic's public `--background` property.
+
+```html
+<ion-segment class="segment-style-glass" value="available">
+  <ion-segment-button value="available">Available</ion-segment-button>
+  <ion-segment-button value="away">Away</ion-segment-button>
+</ion-segment>
+```
+
+For colored segments, use Ionic's `color` property (for example, `color="primary"` or `color="secondary"`). Ionic uses the palette's base color for the softly tinted track while keeping the selected surface and labels neutral. A surrounding colored toolbar only supplies colors when the segment has no color of its own. The optional moving glass inherits the selected surface color, and custom Ionic palettes work without additional registration.
 
 Add `.segment-expand` when segment buttons should divide the available width evenly. The class also changes the Liquid Glass effect sizing when `registerSegmentEffect` is used.
 

package/node_modules/@rdlabo/ionic-theme-utils/scripts/copy-structured-list.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
-import { copyFile } from 'node:fs/promises';
-import { resolve } from 'node:path';
+import { copyFile, mkdir } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
 import process from 'node:process';
 import { URL } from 'node:url';
 
@@ -11,4 +11,7 @@ if (!destination) {
   throw new Error('Usage: rdlabo-copy-structured-list <destination>');
 }
 
-await copyFile(new URL('../src/styles/structured-list.scss', import.meta.url), resolve(destination));
+const destinationPath = resolve(destination);
+
+await mkdir(dirname(destinationPath), { recursive: true });
+await copyFile(new URL('../src/styles/structured-list.scss', import.meta.url), destinationPath);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-ios27",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.3-beta.pr197.shaddcc0eacc313",
   "description": "iOS27 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -56,7 +56,7 @@
   },
   "homepage": "https://docs.rdlabo.dev/projects/ionic-theme-ios27",
   "dependencies": {
-    "@rdlabo/ionic-theme-utils": "git+https://github.com/rdlabo-dev/ionic-theme-utils.git#a3cbfd0c905c603bd90fb7c71b0b76031e8da7b9"
+    "@rdlabo/ionic-theme-utils": "git+https://github.com/rdlabo-dev/ionic-theme-utils.git#e82be4389d9209750229f5fee990046b5b1217da"
   },
   "bundleDependencies": [
     "@rdlabo/ionic-theme-utils"

package/src/styles/components/ion-segment.scss

@@ -1,4 +1,5 @@
 @use '../utils/api';
+@use '../utils/glass';
 
 ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --border-radius: 16px;
@@ -12,6 +13,24 @@ ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) {
   }
   border-radius: var(--border-radius);
 
+  // Use the tab bar material without changing the segment's layout or size.
+  &.segment-style-glass {
+    --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.53);
+    box-sizing: border-box;
+    position: relative;
+    z-index: 0;
+    background: var(--background);
+    backdrop-filter: blur(6px) saturate(180%) brightness(1.05);
+    @include glass.light-rim;
+
+    ion-segment-button {
+      --indicator-color: rgba(
+        var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))),
+        0.095
+      );
+    }
+  }
+
   // UIKit uses a larger control in navigation bars, but not in content.
   &.in-toolbar:not(.segment-expand) {
     --border-radius: 24px;
@@ -74,12 +93,6 @@ ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) {
     }
   }
 
-  &.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);
-    }
-  }
-
   // The indicator grows independently; the label has no additional scale.
   &:not(.ios27-enable-gesture, .segment-disabled):is(.segment-activated, :has(ion-segment-button:is(:active, .ion-activated))) {
     ion-segment-button.segment-button-checked:not(.segment-button-disabled)::part(indicator-background) {
@@ -182,7 +195,3 @@ ion-segment-button.ios:not(.ios-theme-disabled, .ios26-disabled) {
 :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) ion-segment-button) {
   --indicator-color: var(--ion-background-color, #fff);
 }
-:where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled).ion-color ion-segment-button.in-segment-color) {
-  --indicator-color: var(--ion-color-base);
-  --color-checked: var(--ion-color-contrast);
-}

package/src/styles/components/ion-toolbar.scss

@@ -55,6 +55,17 @@ ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled).toolbar-searchbar {
   *[slot='end'] {
     align-self: center;
   }
+  ion-searchbar.ios:not(.ios-theme-disabled, .ios26-disabled) {
+    .searchbar-input-container {
+      margin-block: 0;
+      margin-inline: 4px;
+    }
+    &:is(.searchbar-should-show-cancel, :has(.searchbar-cancel-button:active):not(.searchbar-disabled)) {
+      .searchbar-input-container {
+        margin-inline-end: 11px;
+      }
+    }
+  }
   &:has(ion-buttons[slot='start']) {
     ion-buttons[slot='start'] {
       margin-inline-end: 6px;

package/src/styles/utils/dark/ion-segment.scss

@@ -1,4 +1,5 @@
 @use '../api';
+@use '../glass';
 
 @mixin ion-segment {
   ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) {
@@ -8,11 +9,30 @@
     .ios27-segment-edge {
       @include api.glass-lens-dark;
     }
+    &.segment-style-glass {
+      --background: color-mix(
+        in srgb,
+        color-mix(
+            in srgb,
+            rgb(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb))) 92%,
+            rgb(var(--ion-text-color-rgb, 255, 255, 255))
+          )
+          40%,
+        transparent
+      );
+      background: var(--background);
+      backdrop-filter: blur(6px) saturate(150%) brightness(1.23);
+      @include glass.dark-rim;
+
+      ion-segment-button {
+        --indicator-color: rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, 0, 0, 0)), 0.72);
+      }
+    }
   }
   :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled)) {
     --background: rgba(var(--ion-color-medium-rgb, 152, 154, 162), 0.19);
   }
-  :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled, .ion-color) ion-segment-button:not(.ion-color, .in-segment-color)) {
+  :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) ion-segment-button) {
     --indicator-color: color-mix(in srgb, rgb(var(--ion-color-medium-rgb, 152, 154, 162)) 59%, var(--ion-background-color, #000));
   }
 }