@rdlabo/ionic-theme-ios27 1.0.1 → 1.0.2

package/docs/special-markup.md

@@ -92,6 +92,15 @@ This is an introductory group. Place regular list items in a separate `ion-item-
 
 ## Full-width segments
 
+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"`). 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-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.2",
   "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;

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,6 +9,25 @@
     .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);