@rdlabo/ionic-theme-ios26 0.0.3 → 0.1.0

package/src/components/ion-breadcrumbs.scss

@@ -0,0 +1,24 @@
+/**
+ * Since there is no official Apple version,
+ * and this style is not stylish as iOS 26. it will be removed.
+ */
+
+//@use '../utils/api';
+//
+//ion-breadcrumbs.ios:not(.ios26-disabled) {
+//  ion-breadcrumb {
+//    &::part(native) {
+//      transition: transform 100ms ease-out;
+//      @include api.glass-background;
+//      border-radius: 24px;
+//      margin-inline: 12px;
+//
+//      padding-inline: 12px;
+//      padding-top: 6px;
+//      padding-bottom: 6px;
+//    }
+//    &.ion-activated::part(native) {
+//      transform: scale(1.18);
+//    }
+//  }
+//}

package/src/components/ion-button.scss

@@ -1,111 +1,160 @@
 @use '../utils/api';
 
-@mixin theme-button {
-  max-height: inherit;
-  margin: 8px 4px;
-  &:first-child {
-    margin-left: 12px;
+/**
+ * Note: ion-back-button should not put inner ion-button.
+ * feat(): ion-config new property for disable ion-back-button Animation
+ */
+
+@mixin theme-buttons {
+  @include api.glass-background;
+  border-radius: 25px;
+  overflow: hidden;
+  transition: transform 100ms ease-out !important;
+
+  &:has(.ion-activated) {
+    transform: scale(1.28);
+  }
+
+  ion-button:not(.ios26-disabled),
+  ion-back-button:not(.ios26-disabled) {
+    transform: none;
+
+    &:not(.button-disabled) {
+      opacity: 1;
+    }
+
+    &.ion-activated {
+      --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+      &.ion-color {
+        --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1);
+      }
+    }
+
+    &::part(native) {
+      /**
+       * TODO: remove !important.
+       */
+      box-shadow: none !important;
+      border: none !important;
+      background: transparent !important;
+      backdrop-filter: none !important;
+    }
   }
-  &:last-child {
-    margin-right: 12px;
+
+  ion-button:not(.ios26-disabled) {
+    margin: 0;
+    :first-child {
+      margin-left: -8px;
+    }
+    :last-child {
+      margin-right: -8px;
+    }
+    :only-child {
+      margin: 0;
+    }
   }
 
+  :has(ion-back-button) {
+    margin: 0;
+  }
+}
+
+@mixin theme-button() {
+  max-height: inherit;
+
   transition:
     transform 100ms ease-out,
     color 50ms ease;
   will-change: transform;
 
-  &.ion-activated {
-    transform: scale(1.2);
-    box-shadow: none;
-    ion-icon {
-      // 色を指定しなくても半透明に
-      //color: var(--ion-color-medium-tint);
-    }
-  }
-
   // button size default
-  font-size: 1.05rem;
-  &:not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native) {
-    padding: 0 16px;
-    min-height: 44px;
-  }
-
-  &.button-small {
-    font-size: 1.04rem;
+  &:not(.button-small):not(.button-large) {
+    font-size: 1.05rem;
     &:not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native) {
-      padding: 0 12px;
-      min-height: 36px;
+      padding: 0 16px;
+      min-height: 44px;
     }
   }
 
+  --border-radius: 24px !important;
   &.button-large {
-    font-size: 1.06rem;
-    &:not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native) {
-      padding: 0 20px;
-      min-height: 52px;
-    }
+    --border-radius: 30px !important;
   }
 
-  &::part(native) {
-    border-radius: 25px;
+  &:not(.button-clear):not(.ios26-button-clear) {
+    &.ion-activated {
+      transform: scale(0.95);
+      &.button-small {
+        transform: scale(0.94);
+      }
+      &.button-large {
+        transform: scale(0.96);
+      }
+    }
   }
 
+  // fill:default only
   &:not(.button-solid):not(.ios26-button-solid):not(.button-outline):not(.ios26-button-outline):not(.button-clear):not(
       .ios26-button-clear
-    )::part(native) {
-    @include api.glass-background;
-    border-radius: 25px;
-  }
+    ) {
+    --background-hover: transparent;
+    --background-activated: transparent;
+    &::part(native) {
+      @include api.glass-background;
+    }
+
+    &:not(.button-disabled) {
+      opacity: 1; // for ion-back-button
+    }
 
-  &:not(.button-solid):not(.ios26-button-solid):not(.button-clear):not(.ios26-button-clear) {
-    color: var(--color);
+    --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);
+    }
     &.ion-activated {
+      --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+      &.ion-color {
+        --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1);
+      }
+      transform: scale(1.28);
+      &.button-large {
+        transform: scale(1.18);
+      }
       &::part(native) {
-        &::after {
-          background: transparent !important;
-        }
+        opacity: 1; // for ion-back-button
       }
     }
   }
 
   &.button-has-icon-only,
   &.back-button-has-icon-only {
-    &::part(native) {
-      border-radius: 50%;
+    border-radius: 50%;
+    &:not(.button-small):not(.button-large)::part(native) {
       width: 44px;
       height: 44px;
       padding: 2px;
     }
 
     ion-icon {
-      font-size: 1.4rem !important;
+      font-size: 1.4rem;
       &[name='close-outline'] {
-        font-size: 2rem !important;
+        font-size: 2rem;
       }
     }
   }
 }
 
-/**
- * .ios26-no-liquid-glass を適用しない限り、デフォルトスタイル
- */
-ion-header.ios,
-ion-footer.ios {
-  ion-buttons:not(.ios26-no-liquid-glass) ion-button:not(.ios26-no-liquid-glass),
-  ion-buttons:not(.ios26-no-liquid-glass) ion-back-button:not(.ios26-no-liquid-glass),
-  /* collapseのanimateBackButton対策 */
-  ion-back-button:not(.ios26-no-liquid-glass) {
+ion-buttons.ios:not(.ios26-disabled) {
+  @include theme-buttons;
+  ion-button:not(.ios26-disabled),
+  ion-back-button:not(.ios26-disabled) {
     @include theme-button;
   }
 }
 
-/**
- * .ios26-liquid-glass を任意で適用した場合のスタイル
- */
-ion-buttons.ios.ios26-liquid-glass ion-button:not(.ios26-no-liquid-glass),
-ion-buttons.ios.ios26-liquid-glass ion-back-button:not(.ios26-no-liquid-glass),
-ion-button.ios.ios26-liquid-glass,
-ion-back-button.ios.ios26-liquid-glass {
+ion-button.ios:not(.ios26-disabled) {
+  @include theme-button;
+}
+ion-back-button.ios:not(.ios26-disabled) {
   @include theme-button;
 }

package/src/components/ion-card.scss

@@ -1,3 +1,7 @@
-ion-card.ios {
+ion-card.ios:not(.ios26-disabled) {
   border-radius: 24px;
+
+  ion-list ion-item {
+    --padding-start: 0;
+  }
 }

package/src/components/ion-chip.scss

@@ -0,0 +1,10 @@
+@use '../utils/api';
+
+ion-chip.ios:not(.ios26-disabled) {
+  @include api.glass-background;
+
+  transition: transform 100ms ease-out;
+  &.ion-activated {
+    transform: scale(1.18);
+  }
+}

package/src/components/ion-content.scss

@@ -0,0 +1,13 @@
+.ios:not(.ios26-disabled) {
+  /**
+   * iOS26から上下のセーフエリアいっぱいまでコンテンツを表示するようになったため、
+   * コンテンツのmarginとpaddingを調整します。なお、Angular CDK Scrollingにも対応しています。
+   */
+  .ion-page:not(:has(ion-footer)) ion-content 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));
+  }
+}

package/src/components/ion-datetime.scss

@@ -0,0 +1,9 @@
+@use '../utils/api';
+
+ion-datetime.ios:not(.ios26-disabled) {
+  @include api.glass-background;
+  border-radius: 24px;
+
+  --wheel-highlight-background: transparent !important;
+  --wheel-highlight-border-radius: 24px !important;
+}

package/src/components/ion-fab.scss

@@ -1,6 +1,6 @@
 @use '../utils/api';
 
-ion-fab.ios {
+ion-fab.ios:not(.ios26-disabled) {
   ion-fab-button {
     &::part(native) {
       @include api.glass-background;
@@ -8,9 +8,15 @@ ion-fab.ios {
     }
     --background-activated: rgba(var(--ios26-color-light-rgb), 0.3);
   }
-  // TODO: これはUtility Classにマイグレートする必要があります
-  &.inner-tab-bar {
-    right: calc(16px + var(--ion-safe-area-right, 0px));
+  &.fab-vertical-bottom {
     bottom: var(--ios26-floating-safe-area-bottom);
   }
+
+  &.fab-horizontal-start {
+    right: calc(16px + var(--ion-safe-area-left, 0px));
+  }
+
+  &.fab-horizontal-end {
+    right: calc(16px + var(--ion-safe-area-right, 0px));
+  }
 }

package/src/components/ion-list.scss

@@ -1,10 +1,17 @@
 @use '../utils/theme-list-inset';
 
-ion-list.list-inset.ios {
+ion-list.list-inset.ios:not(.ios26-disabled) {
   @include theme-list-inset.ion-list-inset();
 
-  ion-item-group,
+  ion-radio-group,
   ion-reorder-group {
+    display: block;
+  }
+
+  ion-item-group,
+  ion-reorder-group,
+  ion-accordion-group,
+  ion-radio-group {
     border-radius: 24px;
     overflow: hidden;
 

package/src/components/ion-loading.scss

@@ -0,0 +1,9 @@
+@use '../utils/api';
+
+ion-loading.ios:not(.ios26-disabled) {
+  --backdrop-opacity: 0.2;
+  .loading-wrapper {
+    @include api.glass-background;
+    border-radius: 24px;
+  }
+}

package/src/components/ion-modal.scss

@@ -1,6 +1,31 @@
-ion-modal.ios {
+@use '../utils/api';
+
+ion-modal.ios:not(.ios26-disabled) {
+  --backdrop-opacity: 0.2;
   ion-toolbar {
     padding-right: calc(var(--ion-safe-area-right) + 4px) !important;
     padding-left: calc(var(--ion-safe-area-left) + 4px) !important;
   }
+  &::part(handle) {
+    width: 80px;
+  }
+
+  &.modal-card {
+    /**
+     * IonicでCardModalのborder-radiusはハードコーディングされています。
+     * また、iOS26のドキュメントで見つからないため、サポートは行いません。
+     * https://github.com/ionic-team/ionic-framework/blob/3b80473f2fd5ad4da5a9f5d66f783a69909c8965/core/src/components/modal/animations/ios.enter.ts#L82-L83
+     */
+  }
+
+  &:has(.ion-delegate-host):has(ion-datetime) {
+    --border-radius: 24px;
+  }
+
+  &.modal-sheet {
+    --border-radius: 30px;
+    &::part(content) {
+      @include api.glass-background(1);
+    }
+  }
 }

package/src/components/ion-picker.scss

@@ -0,0 +1,4 @@
+@use '../utils/api';
+
+ion-picker.ios:not(.ios26-disabled) {
+}

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,18 +1,33 @@
 @use '../utils/api';
 
-ion-tab-bar.ios {
+ion-tab-bar.ios:not(.ios26-disabled) {
   @include api.glass-background;
   z-index: 2;
 
   border-radius: 40px;
 
-  width: calc(100% - 56px - 16px - 16px - 4px - 16px);
-  max-width: 400px;
+  &[slot='top'] {
+    position: absolute;
+    top: var(--ios26-floating-safe-area-top);
+    right: calc(16px + var(--ion-safe-area-right, 0px));
+  }
+
+  &[slot='bottom'] {
+    position: absolute;
+    bottom: var(--ios26-floating-safe-area-bottom);
+    left: calc(16px + var(--ion-safe-area-left, 0px));
+  }
+
+  /**
+   * 100% - margin-left - margin-right - right-fab - margin-right-fab
+   */
+  width: calc(100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-left, 0px)) - 54px - 18px);
+  max-width: 474px;
+  &:has(:nth-child(5)) {
+    width: calc(100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-left, 0px)));
+    max-width: 546px;
+  }
   padding: 2px 2px;
-  bottom: var(--ios26-floating-safe-area-bottom);
-  left: calc(16px + var(--ion-safe-area-left, 0px));
-  position: absolute;
-  margin: auto;
 
   transition: transform 100ms ease-out;
   will-change: transform;
@@ -34,7 +49,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);
   }
 }