@rdlabo/ionic-theme-ios26 0.0.3 → 0.0.4

package/src/components/ion-popover.scss

@@ -1,21 +1,13 @@
 @use '../utils/api';
 
-ion-popover.ios {
-  --backdrop-opacity: 0.04;
-  &::part(arrow) {
-    //display: none;
+ion-popover.ios:not(.ios26-disabled) {
+  --backdrop-opacity: 0.2;
+  &::part(arrow)::after {
+    @include api.glass-background;
   }
-  &:not(.ios26-no-liquid-glass) {
-    &::part(content) {
-      @include api.glass-background(0.6);
-      border-radius: 24px;
-      padding: 0;
-    }
-  }
-  ion-list {
-    background: transparent;
-    ion-item {
-      --background: transparent;
-    }
+  &::part(content) {
+    @include api.glass-background;
+    border-radius: 24px;
+    padding: 0;
   }
 }

package/src/components/ion-range.scss

@@ -0,0 +1,21 @@
+@use '../utils/api';
+
+ion-range.ios:not(.ios26-disabled) {
+  --knob-size: 20px;
+  --knob-border-radius: 24px;
+  padding-right: 36px;
+
+  &::part(knob) {
+    width: 38px;
+    transition: transform 0.3s ease;
+  }
+  &.range-pressed::part(knob) {
+    transform: scale(1.4, 1.6) translateX(calc(38px * -0.1));
+    @include api.glass-background(0.1, 0.5px, 120%);
+    box-shadow:
+      inset 0 8px 8px -8px var(--bar-background),
+      inset 0 -8px 8px -8px var(--bar-background),
+      inset 8px 0 8px -8px var(--bar-background),
+      inset -8px 0 8px -8px var(--bar-background);
+  }
+}

package/src/components/ion-searchbar.scss

@@ -1,7 +1,7 @@
 @use '../utils/api';
 
 ion-modal.ios {
-  ion-searchbar:not(.ios26-no-liquid-glass) {
+  ion-searchbar:not(.ios26-disabled) {
     .searchbar-input-container {
       margin: 0 6px;
       input.searchbar-input {
@@ -12,7 +12,7 @@ ion-modal.ios {
   }
 }
 
-ion-searchbar.ios:not(.ios26-no-liquid-glass) {
+ion-searchbar.ios:not(.ios26-disabled) {
   min-height: 60px;
   padding: 0;
 

package/src/components/ion-segment.scss

@@ -1,10 +1,45 @@
-ion-toolbar.ios {
+@use '../utils/api';
+
+ion-toolbar.ios:not(.ios26-disabled) {
+  &:has(ion-segment) {
+    overflow: visible;
+  }
   ion-segment {
-    width: calc(100% - 24px);
-    border-radius: 16px;
+    @include api.glass-background;
+    min-height: 44px;
+    border-radius: 25px;
+
+    transition: transform 100ms ease-out;
+    will-change: transform;
+    overflow: visible;
+
+    ion-segment-button {
+      --border-width: 0;
+
+      &::part(indicator-background) {
+        border-radius: 25px;
+        box-shadow: none;
+        background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
+      }
+    }
+
+    &.segment-activated {
+      transform: scale(1.1);
+      overflow: visible;
 
-    ion-segment-button::part(indicator-background) {
-      border-radius: 16px;
+      ion-segment-button {
+        transition: transform 100ms ease-out;
+        &.segment-button-checked {
+          transform: scale(1.1);
+        }
+        &::part(indicator-background) {
+          position: relative;
+          z-index: 1;
+          @include api.glass-background;
+          transform: scale(1.1);
+          transform-origin: center center;
+        }
+      }
     }
   }
 }

package/src/components/ion-tabs.scss

@@ -1,6 +1,6 @@
 @use '../utils/api';
 
-ion-tab-bar.ios {
+ion-tab-bar.ios:not(.ios26-disabled) {
   @include api.glass-background;
   z-index: 2;
 
@@ -34,7 +34,7 @@ ion-tab-bar.ios {
     &.tab-selected {
       &::part(native) {
         backdrop-filter: blur(7px);
-        background: rgba(var(--ios26-color-tab-active-rgb), 0.1);
+        background: rgba(var(--ios26-color-tab-active-rgb), 0.095);
         transition: background 0.2s ease;
         border-radius: 32px;
       }

package/src/components/ion-toast.scss

@@ -1,3 +1,12 @@
-ion-toast.ios {
-  --border-radius: 24px;
+@use '../utils/api';
+
+ion-toast.ios:not(.ios26-disabled) {
+  --background: transparent;
+  --start: 16px;
+  --end: 16px;
+
+  &::part(container) {
+    @include api.glass-background;
+    border-radius: 24px;
+  }
 }

package/src/components/ion-toggle.scss

@@ -1,47 +1,56 @@
 @use '../utils/api';
 
-@keyframes activate-animation {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1.2, 1.6);
-  }
-}
-
-@keyframes deactivate-animation {
-  0% {
-    transform: scale(1.2, 1.6);
+/**
+ * Adjustments have been made to prevent the right edge from being cut off within the ion-item.
+ * When the native-inner part be added to the ion-item, it will be removed.
+ */
+ion-item.ios:not(.ios26-disabled) ion-toggle.ios:not(.ios26-disabled) {
+  &.toggle-checked.toggle-activated::part(track) {
+    transform-origin: left;
+    transform: scaleX(0.894);
   }
-  100% {
-    transform: scale(0);
+  &.toggle-activated::part(handle) {
+    transform: scale(1.4, 1.6) translateX(calc(38px * -0.15));
   }
 }
 
-ion-toggle.ios {
+ion-toggle.ios:not(.ios26-disabled) {
   --handle-width: 38px;
   --handle-height: 24px;
   --handle-max-width: none;
   --handle-max-height: none;
   --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);
-  ::part(handle) {
-    transition: transform 0.3s ease;
-  }
-  &.toggle-activated::part(handle) {
-    transform: scale(1.2, 1.6) translateX(calc(38px * -0.1));
-    @include api.glass-background(0.1, 0.5px, 120%);
-    box-shadow:
-      inset 0 0 4px 0 rgba(var(--ios26-color-shadow-rgb), 0.2),
-      0 0 6px 0 rgba(var(--ios26-color-shadow-rgb), 0.8);
-  }
   &::part(track) {
     overflow: visible;
     width: 64px;
     height: 28px;
     transition: transform 0.3s ease;
   }
-  &.toggle-checked.toggle-activated::part(track) {
-    transform-origin: left center;
-    transform: scaleX(0.926);
+  &.toggle-activated:not(.toggle-checked)::part(handle) {
+    transform: translateX(-4px) scale(1.4, 1.6);
+  }
+  &.toggle-activated::part(handle) {
+    transform: scale(1.4, 1.6);
+    @include api.glass-background(0.1, 0.5px, 120%);
+    transition:
+      transform 300ms,
+      width 120ms ease-in-out 80ms,
+      left 110ms ease-in-out 80ms,
+      right 110ms ease-in-out 80ms;
+    box-shadow: inset 0 0 8px 0 var(--track-background);
+  }
+  &.ion-color.toggle-checked.toggle-activated::part(handle) {
+    box-shadow:
+      inset 0 8px 8px -8px var(--ion-color-base),
+      inset 8px 0 8px -8px var(--track-background),
+      inset 8px 0 8px -8px var(--track-background),
+      inset -8px 0 8px -8px var(--ion-color-base);
+  }
+  &.toggle-checked.toggle-activated::part(handle) {
+    box-shadow:
+      inset 0 8px 8px -8px var(--track-background-checked),
+      inset 8px 0 8px -8px var(--track-background),
+      inset 8px 0 8px -8px var(--track-background),
+      inset -8px 0 8px -8px var(--track-background-checked);
   }
 }

package/src/components/ion-toolbar.scss

@@ -0,0 +1,27 @@
+@use 'ion-button';
+
+/**
+ * https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/header/header.scss#L17-L19
+ * ion-header ion-toolbar:first-of-type {
+ *  padding-top: var(--ion-safe-area-top, 0);
+ * }
+ */
+ion-header.ios:not(.ios26-disabled) ion-toolbar:not(.ios26-disabled):first-of-type {
+  padding-top: max(calc(var(--ion-safe-area-top) - 12px), 4px);
+}
+
+ion-toolbar.ios:not(.toolbar-title-large):not(.ios26-disabled) {
+  --min-height: 68px;
+}
+
+ion-header.ios:not(.ios26-disabled),
+ion-footer.ios:not(.ios26-disabled) {
+  ion-buttons {
+    margin-left: calc(12px + var(--ion-safe-area-left));
+    margin-right: calc(12px + var(--ion-safe-area-right));
+  }
+  ion-back-button {
+    margin-left: calc(12px + var(--ion-safe-area-left));
+    margin-right: calc(12px + var(--ion-safe-area-right));
+  }
+}

package/src/{utils/default-variables.scss → default-variables.scss}

@@ -1,10 +1,12 @@
 :root {
   --ios26-floating-safe-area-bottom: max(10px, var(--ion-safe-area-bottom, 0px));
+  --ios26-content-box-shadow-opacity: 0.8;
 
   --ios26-color-dark-rgb: 0, 0, 0;
   --ios26-color-light-rgb: 255, 255, 255;
   --ios26-color-tab-active-rgb: 16, 16, 16;
-  --ios26-color-shadow-rgb: 224, 224, 224;
+  --ios26-color-inner-shadow-rgb: 224, 224, 224;
+  --ios26-color-outer-shadow-rgb: 224, 224, 224;
   --ios26-color-background-rgb: 255, 255, 255;
   --ios26-color-edge-rgb: 255, 255, 255;
 }

package/src/ionic-theme-ios26-dark-always.scss

@@ -0,0 +1,6 @@
+@use 'utils/theme-dark';
+
+:root {
+  @include theme-dark.default-variables;
+}
+@include theme-dark.theme-dark;

package/src/{ionic-theme-dark-class.scss → ionic-theme-ios26-dark-class.scss}

@@ -1,4 +1,4 @@
-@use 'components-dark/theme-dark';
+@use 'utils/theme-dark';
 
 .ion-palette-dark {
   @include theme-dark.default-variables;

package/src/{ionic-theme-dark-system.scss → ionic-theme-ios26-dark-system.scss}

@@ -1,4 +1,4 @@
-@use 'components-dark/theme-dark';
+@use 'utils/theme-dark';
 
 @media (prefers-color-scheme: dark) {
   :root {

package/src/ionic-theme-ios26.scss

@@ -1,32 +1,23 @@
-@use 'utils/default-variables';
-
-@use 'utils/api';
 @use 'utils/translucent';
 
 @use 'components/ion-action-sheet';
 @use 'components/ion-alert';
+@use 'components/ion-breadcrumbs';
 @use 'components/ion-button';
 @use 'components/ion-card';
+@use 'components/ion-chip';
+@use 'components/ion-content';
+@use 'components/ion-datetime';
 @use 'components/ion-fab';
 @use 'components/ion-list';
+@use 'components/ion-loading';
 @use 'components/ion-modal';
+@use 'components/ion-picker';
 @use 'components/ion-popover';
+@use 'components/ion-range';
 @use 'components/ion-searchbar';
 @use 'components/ion-segment';
 @use 'components/ion-tabs';
 @use 'components/ion-toast';
 @use 'components/ion-toggle';
-
-.ios {
-  /**
-   * iOS26から上下のセーフエリアいっぱいまでコンテンツを表示するようになったため、
-   * コンテンツのmarginとpaddingを調整します。なお、Angular CDK Scrollingにも対応しています。
-   */
-  .ion-page:not(:has(ion-footer)) cdk-virtual-scroll-viewport {
-    margin-bottom: calc(calc(56px + var(--ios26-floating-safe-area-bottom)) * -1);
-    padding-bottom: calc(56px + var(--ios26-floating-safe-area-bottom));
-  }
-  ion-content:not(:has(cdk-virtual-scroll-viewport)) {
-    --padding-bottom: calc(56px + var(--ios26-floating-safe-area-bottom));
-  }
-}
+@use 'components/ion-toolbar';

package/src/utils/api.scss

@@ -1,20 +1,21 @@
-@mixin glass-background($opacity: 0.4, $blur: 6px, $saturate: 180%) {
+@mixin glass-background($opacity: 0.7, $blur: 2px, $saturate: 360%) {
   background: rgba(var(--ios26-color-light-rgb), $opacity);
   backdrop-filter: blur($blur) saturate($saturate);
   box-shadow:
-    inset 0 0 8px 0 rgba(var(--ios26-color-shadow-rgb), 0.2),
-    0 0 12px 0 rgba(var(--ios26-color-shadow-rgb), 0.8);
+    inset 0 0 8px 0 rgba(var(--ios26-color-inner-shadow-rgb), 0.2),
+    0 0 12px 0 rgba(var(--ios26-color-outer-shadow-rgb), 0.82);
   border-top: 0.5px solid rgba(var(--ios26-color-edge-rgb), 1);
   border-right: 0.5px solid rgba(var(--ios26-color-edge-rgb), 0.8);
   border-bottom: 0.5px solid rgba(var(--ios26-color-edge-rgb), 1);
   border-left: 0.5px solid rgba(var(--ios26-color-edge-rgb), 0.6);
-  transition: box-shadow 0.1s ease;
 }
 
-@mixin glass-background-dark-active($opacity: 0.25, $blur: 7px, $saturate: 180%) {
+@mixin glass-background-dark-active($opacity: 0.4, $blur: 7px, $saturate: 180%) {
   background: rgba(var(--ios26-color-tab-active-rgb), $opacity);
   backdrop-filter: blur($blur) saturate($saturate);
-  box-shadow: inset 0 0 8px 0 rgba(var(--ios26-color-tab-active-rgb), 0.2);
-  border: 0.5px solid rgba(var(--ios26-color-tab-active-rgb), 0.7);
-  transition: box-shadow 0.1s ease;
+  box-shadow: none;
+  border-top: 0.5px solid rgba(var(--ios26-color-tab-active-rgb), 0.4);
+  border-right: 0.5px solid rgba(var(--ios26-color-tab-active-rgb), 0.2);
+  border-bottom: 0.5px solid rgba(var(--ios26-color-tab-active-rgb), 0.4);
+  border-left: 0.5px solid rgba(var(--ios26-color-tab-active-rgb), 0.3);
 }

package/src/utils/dark/ion-button.scss

@@ -0,0 +1,45 @@
+@use '../api';
+
+@mixin theme-dark-buttons {
+  &:has(.ion-activated) {
+    @include api.glass-background-dark-active;
+  }
+
+  ion-button:not(.ios26-disabled),
+  ion-back-button:not(.ios26-disabled) {
+    &.ion-activated {
+      --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
+
+      &.ion-color {
+        --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 1);
+      }
+    }
+  }
+}
+
+@mixin theme-dark-button {
+  &.ion-activated:not(.button-solid):not(.ios26-button-solid):not(.button-outline):not(.ios26-button-outline):not(.button-clear):not(
+      .ios26-button-clear
+    ) {
+    --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
+    &.ion-color {
+      --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 1);
+    }
+    &::part(native) {
+      @include api.glass-background-dark-active;
+    }
+    ion-icon {
+      color: rgb(255, 255, 255) !important;
+    }
+  }
+}
+
+@mixin ion-button {
+  ion-buttons:not(.ios26-disabled) {
+    @include theme-dark-buttons;
+  }
+  ion-button:not(.ios26-disabled),
+  ion-back-button:not(.ios26-disabled) {
+    @include theme-dark-button;
+  }
+}

package/src/{components-dark → utils}/theme-dark.scss

@@ -1,14 +1,16 @@
-@use '../components-dark/ion-button';
+@forward 'dark/ion-button';
+@use 'dark/ion-button' as *;
 
 @mixin default-variables {
   --ios26-color-dark-rgb: 255, 255, 255;
   --ios26-color-light-rgb: 58, 58, 58;
   --ios26-color-tab-active-rgb: 255, 255, 255;
-  --ios26-color-shadow-rgb: translarent;
+  --ios26-color-inner-shadow-rgb: translarent;
+  --ios26-color-outer-shadow-rgb: translarent;
   --ios26-color-background-rgb: 0, 0, 0;
   --ios26-color-edge-rgb: 64, 64, 64;
 }
 
 @mixin theme-dark {
-  @include ion-button.ion-button-dark;
+  @include ion-button;
 }

package/src/utils/theme-list-inset.scss

@@ -55,30 +55,34 @@
     }
   }
 
-  ion-item-group ion-item {
-    ion-text[slot='end'] {
-      padding-left: 8px;
-    }
+  ion-item-group,
+  ion-reorder-group,
+  ion-radio-group {
+    ion-item {
+      ion-text[slot='end'] {
+        padding-left: 8px;
+      }
 
-    &.item-disabled {
-      opacity: 1;
+      &.item-disabled {
+        opacity: 1;
 
-      & > * {
-        opacity: 0.4;
-      }
+        & > * {
+          opacity: 0.4;
+        }
 
-      &::part(detail-icon) {
-        opacity: 0.1;
+        &::part(detail-icon) {
+          opacity: 0.1;
+        }
       }
-    }
 
-    ion-button[slot='end'] {
-      &.ion-align-self-end {
-        transform: translateY(-7px);
-      }
-      ion-icon[slot='icon-only'] {
-        font-size: 1.2rem !important;
-        transform: translateY(4px);
+      ion-button[slot='end'] {
+        &.ion-align-self-end {
+          transform: translateY(-7px);
+        }
+        ion-icon[slot='icon-only'] {
+          font-size: 1.2rem !important;
+          transform: translateY(4px);
+        }
       }
     }
   }

package/src/utils/translucent.scss

@@ -1,70 +1,71 @@
 @use 'api';
 
-.ios {
-  ion-header.header-translucent,
-  ion-footer.footer-translucent {
-    .header-background,
-    .footer-background {
-      backdrop-filter: none;
-    }
+ion-header.ios:not(.ios26-disabled).header-translucent,
+ion-footer.ios:not(.ios26-disabled).footer-translucent {
+  .header-background,
+  .footer-background {
+    backdrop-filter: none;
+  }
 
-    ion-toolbar {
-      --border-width: 0;
-      --background: transparent;
-      /**
-       * TODO: Not expect work.
-       * https://github.com/ionic-team/ionic-framework/blob/3b80473f2fd5ad4da5a9f5d66f783a69909c8965/core/src/utils/transition/ios.transition.ts#L829C51-L829C60
-       * --opacity: 0;
-       */
-      .toolbar-background {
-        background: transparent !important;
-      }
-      ion-title {
-        filter: blur(0);
-        transform: translateY(0);
-      }
+  ion-toolbar {
+    --border-width: 0;
+    --background: transparent;
+    /**
+     * TODO: Not expect work.
+     * https://github.com/ionic-team/ionic-framework/blob/3b80473f2fd5ad4da5a9f5d66f783a69909c8965/core/src/utils/transition/ios.transition.ts#L829C51-L829C60
+     * --opacity: 0;
+     */
+    .toolbar-background {
+      background: transparent !important;
+    }
+    ion-title {
+      filter: blur(0);
+      transform: translateY(0);
     }
   }
+}
 
-  .header-collapse-main ion-toolbar.in-toolbar ion-title,
-  .header-collapse-main ion-toolbar.in-toolbar ion-buttons {
-    transition: all 0.5s ease-in-out;
-  }
+ion-header.ios:not(.ios26-disabled).header-collapse-main ion-toolbar.in-toolbar ion-title,
+ion-header.ios:not(.ios26-disabled).header-collapse-main ion-toolbar.in-toolbar ion-buttons {
+  transition: all 0.5s ease-in-out;
+}
 
-  .header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
-  .header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
-    filter: blur(2px);
-    transform: translateY(8px);
-  }
+ion-header.ios:not(.ios26-disabled).header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
+ion-header.ios:not(.ios26-disabled).header-collapse-condense-inactive:not(.header-collapse-condense)
+  ion-toolbar.in-toolbar
+  ion-buttons.buttons-collapse {
+  filter: blur(2px);
+  transform: translateY(8px);
+}
 
-  ion-content::part(background)::before,
-  ion-content::part(background)::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    pointer-events: none;
-    z-index: 1;
-  }
+ion-content:not(.ios26-disabled)::part(background)::before,
+ion-content:not(.ios26-disabled)::part(background)::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
 
-  .ion-page:has(ion-header.header-translucent) ion-content::part(background)::before {
-    z-index: 2;
-    top: 0;
-    height: calc(66px + var(--ion-safe-area-top));
-    box-shadow:
-      inset 0 0 0 0 rgba(var(--ios26-color-background-rgb), 0),
-      inset 0 calc(66px + var(--ion-safe-area-top)) 20px -20px rgba(var(--ios26-color-background-rgb), 1);
-  }
+/**
+ * ここから下は、ion-content::before/afterが content:'' を持たない限り表示されない
+ */
+.ion-page:has(ion-header.header-translucent) > ion-content::part(background)::before {
+  z-index: 2;
+  top: 0;
+  height: calc(68px + max(calc(var(--ion-safe-area-top) - 12px), 4px));
+  box-shadow: inset 0 calc(68px + max(calc(var(--ion-safe-area-top) - 12px), 4px)) 16px -16px
+    rgba(var(--ios26-color-background-rgb), var(--ios26-content-box-shadow-opacity));
+}
 
-  ion-content::part(background)::after {
-    z-index: 2;
-    bottom: 0;
-    height: calc(56px + var(--ios26-floating-safe-area-bottom));
-    box-shadow:
-      inset 0 0 0 0 rgba(var(--ios26-color-background-rgb), 0),
-      inset 0 calc(-50px - var(--ios26-floating-safe-area-bottom)) 40px -40px rgba(var(--ios26-color-background-rgb), 0.8);
-  }
+ion-content::part(background)::after {
+  z-index: 2;
+  bottom: 0;
+  height: calc(56px + var(--ios26-floating-safe-area-bottom));
+  box-shadow: inset 0 calc(-55px - var(--ios26-floating-safe-area-bottom)) 16px -16px
+    rgba(var(--ios26-color-background-rgb), var(--ios26-content-box-shadow-opacity));
+}
 
-  .ion-page:has(ion-footer:not(.footer-translucent)) ion-content::part(background)::after {
-    content: none;
-  }
+.ion-page:has(ion-footer:not(.footer-translucent)) ion-content::part(background)::after {
+  content: none;
 }

package/build-sass.js

@@ -1,25 +0,0 @@
-const { execSync } = require('child_process');
-const fs = require('fs');
-const path = require('path');
-
-const srcDir = path.resolve(__dirname, 'src');
-const outDir = path.resolve(__dirname, 'dist/css');
-
-// 出力先ディレクトリがなければ作る
-if (!fs.existsSync(outDir)) {
-  fs.mkdirSync(outDir, { recursive: true });
-}
-
-// src ディレクトリの .scss ファイルを取得
-const scssFiles = fs.readdirSync(srcDir).filter(f => f.endsWith('.scss'));
-
-scssFiles.forEach(file => {
-  const srcPath = path.join(srcDir, file);
-  const fileName = path.basename(file, '.scss');
-  const outPath = path.join(outDir, `${fileName}.min.css`);
-
-  console.log(`Building ${srcPath} → ${outPath}`);
-  execSync(`npx sass ${srcPath} ${outPath} --style=compressed`, { stdio: 'inherit' });
-});
-
-console.log('All SCSS files compiled successfully!');