@rdlabo/ionic-theme-ios27 0.1.0-0

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

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

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

@@ -0,0 +1,110 @@
+@use '../utils/api';
+
+ion-split-pane.ios:not(.ios26-disabled) {
+  --side-max-width: var(--ios26-menu-width);
+}
+
+ion-split-pane.ios:not(.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) {
+  .split-pane-main {
+    ion-tab-bar.ios:not(.ios26-disabled) {
+      width: calc(
+        100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-left, 0px)) - 60px -
+          12px - var(--ios26-menu-width)
+      );
+
+      &:has(:nth-child(5)) {
+        width: calc(
+          100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-left, 0px)) - var(--ios26-menu-width)
+        );
+      }
+    }
+  }
+  &:has(ion-menu.menu-side-start) {
+    .split-pane-main {
+      ion-header ion-toolbar {
+        /*
+         * 4px: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/toolbar/toolbar.ios.vars.scss#L28-L32
+         */
+        --padding-start: calc(var(--ios26-menu-width) + 4px);
+        ion-title.title-default {
+          /*
+           * 90px: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/title/title.ios.scss#L8
+           */
+          padding-left: calc(90px + var(--ios26-menu-width));
+        }
+      }
+      ion-content {
+        --padding-start: var(--ios26-menu-width);
+        ion-header ion-toolbar {
+          --padding-start: 4px;
+        }
+      }
+      ion-footer ion-toolbar {
+        --padding-start: var(--ios26-menu-width);
+      }
+      ion-tab-bar.ios:not(.ios26-disabled) {
+        &[slot='bottom'] {
+          left: calc(16px + var(--ion-safe-area-left, 0px) + var(--ios26-menu-width));
+        }
+      }
+    }
+  }
+
+  &:has(ion-menu.ios:not(.ios26-disabled).menu-side-end) {
+    .split-pane-main {
+      ion-header ion-toolbar {
+        /*
+         * 4px: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/toolbar/toolbar.ios.vars.scss#L28-L32
+         */
+        --padding-end: calc(var(--ios26-menu-width) + 4px);
+        ion-title.title-default {
+          /*
+           * 90px: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/title/title.ios.scss#L8
+           */
+          padding-right: calc(90px + var(--ios26-menu-width));
+        }
+      }
+      ion-content {
+        --padding-end: var(--ios26-menu-width);
+        ion-header ion-toolbar {
+          --padding-start: 4px;
+        }
+      }
+      ion-footer ion-toolbar {
+        --padding-end: var(--ios26-menu-width);
+      }
+    }
+  }
+}
+
+ion-menu.ios:not(.ios26-disabled) {
+  --border: none;
+  --background: transparent;
+  --max-width: var(--ios26-menu-width);
+  position: absolute;
+  top: 0;
+  z-index: 999;
+
+  &.menu-side-start {
+    left: 0;
+  }
+  &.menu-side-end {
+    left: calc(100vw - var(--ios26-menu-width));
+  }
+
+  &::part(backdrop) {
+    display: none;
+  }
+
+  ion-content {
+    --background: transparent;
+    --ios26-content-box-shadow-rgb: transparent;
+
+    &::part(scroll) {
+      @include api.glass-background;
+      margin: calc(var(--ios26-floating-safe-area-top) + 6px) calc(16px + var(--ion-safe-area-right)) var(--ios26-floating-safe-area-bottom)
+        calc(12px + var(--ion-safe-area-left));
+      border-radius: 24px;
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+@use '../utils/api';
+
+ion-modal.ios:not(.ios26-disabled) {
+  --backdrop-opacity: 0.2;
+
+  &::part(handle) {
+    width: 80px;
+  }
+
+  ion-toolbar {
+    padding-right: var(--ion-safe-area-right);
+    padding-left: var(--ion-safe-area-left);
+  }
+
+  &.modal-sheet {
+    ion-toolbar {
+      padding-right: calc(var(--ion-safe-area-right) + 4px);
+      padding-left: calc(var(--ion-safe-area-left) + 4px);
+    }
+  }
+
+  &.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;
+    --ion-background-color: transparent;
+  }
+
+  &.modal-sheet {
+    --border-radius: 30px;
+    --background: rgba(var(--ios26-glass-background-rgb), 1);
+    &::part(content) {
+      @include api.glass-background($opacity: 1, $include-background: false);
+    }
+  }
+}

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

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

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

@@ -0,0 +1,33 @@
+@use '../utils/api';
+
+ion-popover.ios:not(.ios26-disabled) {
+  --backdrop-opacity: 0.2;
+  --background: rgba(var(--ios26-glass-background-rgb), 0.72);
+  --box-shadow:
+    inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2), 0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);
+  &::part(arrow) {
+    display: none;
+    ::after {
+      //@include api.glass-background;
+    }
+  }
+  &::part(content) {
+    @include api.glass-background($include-background: false, $include-box-shadow: false);
+    border-radius: 24px;
+    padding: 0;
+  }
+  ion-select-popover {
+    ion-list {
+      background: transparent;
+      ion-item {
+        --background: transparent;
+        &:last-of-type {
+          --border-width: 0px;
+          --show-full-highlight: 0;
+          --inner-border-width: 0px;
+          --show-inset-highlight: 0;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,90 @@
+@use '../utils/api';
+
+@mixin scaled-transform($translate-x) {
+  transform: scale(1.56, 1.47) translateX(calc(#{$translate-x} * -0.1)) translateZ(0);
+  -webkit-transform: scale(1.56, 1.47) translateX(calc(#{$translate-x} * -0.1)) translateZ(0);
+}
+
+ion-range.ios:not(.ios26-disabled) {
+  --knob-size: 20px;
+  --knob-width: 38px;
+  --knob-border-radius: 24px;
+
+  &.range-label-placement-start::part(label) {
+    margin-inline: 0 24px;
+  }
+
+  &.range-label-placement-end::part(label) {
+    margin-inline: 24px 0;
+  }
+
+  [slot='start'] {
+    margin-inline: 0 24px;
+  }
+
+  [slot='end'] {
+    margin-inline: 24px 0;
+  }
+
+  &::part(knob) {
+    width: var(--knob-width);
+    margin-inline-start: -8px;
+    transition:
+      transform 300ms ease,
+      margin 300ms ease,
+      box-shadow 200ms ease;
+  }
+
+  &:not(.range-dual-knobs).range-pressed {
+    --knob-background: rgba(var(--ios26-glass-background-rgb), 0.1);
+    --knob-box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 4px rgba(0, 0, 0, 0.05), inset 0.4px 0.4px 1px 0 var(--bar-background-active);
+
+    &::part(knob) {
+      @include api.glass-background(0.1, 0, 120%, $include-background: false, $include-box-shadow: false, $include-border: false);
+      @include scaled-transform(0px);
+    }
+
+    &.range-value-min {
+      --knob-box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 4px rgba(0, 0, 0, 0.05);
+
+      &::part(knob) {
+        @include scaled-transform(calc(var(--knob-width) * -2));
+      }
+    }
+    &.range-value-max {
+      --knob-box-shadow:
+        0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 4px rgba(0, 0, 0, 0.05), inset 0.4px 0.4px 1px 0.2px var(--bar-background-active);
+
+      &::part(knob) {
+        @include scaled-transform(calc(var(--knob-width) * 2));
+      }
+    }
+  }
+
+  &.range-dual-knobs.range-pressed {
+    &.range-pressed-a::part(knob-a),
+    &.range-pressed-b::part(knob-b) {
+      @include api.glass-background(0.1, 0, 120%, $include-border: false);
+      @include scaled-transform(0px);
+      box-shadow:
+        0 0.5px 4px rgba(0, 0, 0, 0.12),
+        0 6px 4px rgba(0, 0, 0, 0.05),
+        inset 0.4px 0.4px 1px 0 var(--bar-background-active);
+    }
+
+    &.range-value-min.range-pressed-lower::part(knob-lower) {
+      @include scaled-transform(calc(var(--knob-width) * -2));
+      box-shadow:
+        0 0.5px 4px rgba(0, 0, 0, 0.12),
+        0 6px 4px rgba(0, 0, 0, 0.05);
+    }
+
+    &.range-value-max.range-pressed-upper::part(knob-upper) {
+      @include scaled-transform(calc(var(--knob-width) * 2));
+      box-shadow:
+        0 0.5px 4px rgba(0, 0, 0, 0.12),
+        0 6px 4px rgba(0, 0, 0, 0.05),
+        inset 0.4px 0.4px 1px 0.2px var(--bar-background-active);
+    }
+  }
+}

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

@@ -0,0 +1,68 @@
+@use '../utils/api';
+
+ion-modal.ios {
+  ion-searchbar:not(.ios26-disabled) {
+    .searchbar-input-container {
+      input.searchbar-input {
+        // Modal表示でのアイコン非表示の不具合の対応
+        backdrop-filter: none;
+      }
+    }
+  }
+}
+
+ion-searchbar.ios:not(.ios26-disabled):not(.searchbar-classic) {
+  min-height: 60px;
+  padding: 0;
+
+  ion-icon.searchbar-search-icon {
+    inset-inline-start: 12px;
+    opacity: 1;
+  }
+
+  .searchbar-input-container {
+    margin: 0 8px 0 16px;
+    align-self: center;
+    justify-self: center;
+    input.searchbar-input {
+      min-height: 44px;
+      @include api.glass-background;
+      border-radius: 22px;
+      padding-inline-start: 2.4rem;
+    }
+    .searchbar-clear-button {
+      padding-inline-end: 2rem;
+    }
+  }
+
+  // Ionic writes a physical inline padding while the placeholder is centered.
+  // Match before hydration as well, so Ionic's `transition: all` cannot animate through the inline value.
+  &:not(.searchbar-left-aligned) .searchbar-input-container input.searchbar-input {
+    padding-inline-start: 2.4rem !important;
+  }
+}
+
+/**
+ * add searchbar-classic
+ */
+ion-toolbar.ios:not(.ios26-disabled):has(ion-searchbar.searchbar-classic.ios:not(.ios26-disabled)) {
+  --min-height: auto;
+}
+ion-searchbar.ios:not(.ios26-disabled).searchbar-classic {
+  padding-bottom: 12px;
+  min-height: auto;
+  .searchbar-input-container input.searchbar-input {
+    border-radius: 999px;
+    height: 44px;
+    font-size: 0.98rem;
+    padding-inline-start: 38px;
+    background: rgba(var(--ion-color-contrast-rgb), 0.078);
+  }
+  ion-icon.searchbar-search-icon {
+    inset-inline-start: 12px;
+    width: 1.18rem;
+  }
+  button.searchbar-clear-button {
+    right: 8px;
+  }
+}

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

@@ -0,0 +1,150 @@
+@use '../utils/api';
+
+ion-segment.ios:not(.ios26-disabled) {
+  @include api.glass-background;
+  min-height: 48px;
+  border-radius: 25px;
+
+  transition: transform var(--ios26-activated-transition-duration) ease-out;
+
+  // will-change is optimized to only apply when needed for performance
+  &.segment-activated,
+  &:has(ion-segment-button.ion-activated) {
+    will-change: transform;
+  }
+
+  &:not(.segment-activated):not(:has(ion-segment-button.ion-activated)) {
+    will-change: auto;
+  }
+
+  ion-segment-button:is(.in-toolbar-color, .in-segment-color)::part(indicator-background) {
+    // Ionic sets a direct background for color contexts, bypassing --indicator-color.
+    background: var(--indicator-color);
+  }
+
+  &.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);
+    }
+  }
+
+  &:not(.ios26-enable-gesture).segment-activated {
+    transform: scale(1.1) translateZ(0);
+    -webkit-transform: scale(1.1) translateZ(0);
+    ion-segment-button {
+      --indicator-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0);
+      --indicator-transform: scale(1.1) translateZ(0);
+      transition: transform 100ms ease-out;
+      &.segment-button-checked::part(native) {
+        transform: scale(1.08) translateZ(0);
+        -webkit-transform: scale(1.08) translateZ(0);
+      }
+      &::part(indicator-background) {
+        position: relative;
+        z-index: 1;
+        transform-origin: center center;
+      }
+    }
+  }
+
+  &.ios26-enable-gesture {
+    &:has(ion-segment-button.ion-activated) {
+      transform: scale(1.1) translateZ(0);
+      -webkit-transform: scale(1.1) translateZ(0);
+      ion-segment-button {
+        --indicator-transform: scale(1.1) translateZ(0);
+        transition: transform 100ms ease-out;
+        &.segment-button-checked::part(native) {
+          transform: scale(1.08) translateZ(0);
+          -webkit-transform: scale(1.08) translateZ(0);
+        }
+        &::part(indicator-background) {
+          position: relative;
+          z-index: 1;
+          transform-origin: center center;
+        }
+      }
+    }
+    &.ios26-animated {
+      ion-segment-button {
+        --indicator-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0);
+      }
+    }
+  }
+
+  &.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.segment-button-checked::part(native) {
+        transform: scale(1);
+      }
+    }
+
+    ion-segment-button {
+      min-height: 24px;
+    }
+
+    &.ios26-enable-gesture {
+      &:has(ion-segment-button.ion-activated) {
+        transform: scale(1) translateZ(0);
+        -webkit-transform: scale(1) translateZ(0);
+        ion-segment-button {
+          --indicator-transform: scale(1) translateZ(0);
+          transition: none;
+          &.segment-button-checked::part(native) {
+            transform: scale(1) translateZ(0);
+            -webkit-transform: scale(1) translateZ(0);
+          }
+          &::part(indicator-background) {
+            position: relative;
+            z-index: 1;
+            transform-origin: center center;
+          }
+        }
+      }
+      &.ios26-animated {
+        ion-segment-button {
+          --indicator-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0);
+        }
+      }
+    }
+  }
+}
+
+ion-segment-button.ios:not(.ios26-disabled) {
+  --border-width: 0;
+  --indicator-box-shadow: none;
+  --indicator-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
+  --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;
+    transition: background 0.2s ease;
+  }
+
+  &.ion-cloned-element {
+    &::part(native) {
+      border-radius: 25px;
+      @include api.glass-background($opacity: 1, $blur: 0, $saturate: 104%);
+      background: transparent;
+      height: 100%;
+    }
+    color: var(--color-selected, var(--ion-color-primary, #0054e9));
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    top: -3.25px;
+    transform-origin: center center;
+    & > * {
+      visibility: hidden;
+    }
+  }
+}

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

@@ -0,0 +1,118 @@
+@use '../utils/api';
+
+ion-tab-bar.ios:not(.ios26-disabled) {
+  @include api.glass-background;
+  z-index: 2;
+
+  border-radius: 40px;
+  --color: rgb(var(--ion-text-color-rgb, 0, 0, 0));
+
+  &[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-left-fab
+   */
+  width: calc(100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-left, 0px)) - 60px - 12px);
+  max-width: 474px;
+  min-height: 56px;
+  &: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;
+
+  transition: transform var(--ios26-activated-transition-duration) ease-out;
+
+  // will-change is optimized to only apply when needed for performance
+  &:has(ion-tab-button.ion-activated) {
+    will-change: transform;
+    transform: scale(1.038) translateZ(0);
+    -webkit-transform: scale(1.038) translateZ(0);
+  }
+
+  &:not(:has(ion-tab-button.ion-activated)) {
+    will-change: auto;
+  }
+
+  &:has(ion-tab-button.ion-activated) {
+    ion-tab-button.tab-selected:not(.ion-activated) {
+      --color-selected: rgb(var(--ion-text-color-rgb, 0, 0, 0));
+    }
+  }
+
+  /**
+   * effectが有効な場合、effectでスタイリングするため不要
+   */
+  &.ios26-enable-gesture.ios26-animated {
+    ion-tab-button.tab-selected::part(native) {
+      background: rgba(var(--ios26-button-color-selected-rgb), 0);
+    }
+    ion-tab-button.ion-activated {
+      ion-label,
+      ion-icon {
+        filter: brightness(100%);
+      }
+    }
+  }
+}
+
+ion-tab-button.ios:not(.ios26-disabled) {
+  ion-icon {
+    font-size: 26px;
+  }
+  ion-label,
+  ion-icon {
+    transition:
+      filter var(--ios26-activated-transition-duration) ease,
+      color var(--ios26-activated-transition-duration) ease;
+  }
+  background: rgba(var(--ios26-glass-background-rgb), 0);
+  height: auto;
+  transition: transform var(--ios26-activated-transition-duration) ease;
+  &::part(native) {
+    overflow: visible;
+    min-height: 56px;
+    border-radius: 32px;
+  }
+
+  &.ion-activated {
+    transform: scale(1.1);
+    position: relative;
+    color: var(--color-selected);
+    ion-label,
+    ion-icon {
+      filter: brightness(104%);
+    }
+  }
+
+  &.tab-selected {
+    &::part(native) {
+      background: rgba(var(--ios26-button-color-selected-rgb), 0.095);
+      transition: background var(--ios26-activated-transition-duration) ease;
+    }
+  }
+
+  &.ion-cloned-element {
+    &::part(native) {
+      @include api.glass-background($opacity: 0, $blur: 0, $saturate: 104%);
+    }
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    transform-origin: center;
+    & > * {
+      visibility: hidden;
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+@use '../utils/api';
+
+ion-toast.ios:not(.ios26-disabled) {
+  --background: rgba(var(--ios26-glass-background-rgb), 0.72);
+  --border-radius: 24px;
+  --border-style: solid;
+  --border-width: 0.5px;
+  --box-shadow:
+    inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2), 0 0 10px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.82);
+  --start: 16px;
+  --end: 16px;
+
+  &::part(wrapper) {
+    @include api.glass-background($include-background: false, $include-box-shadow: false, $include-border: false);
+    border-top-color: rgba(var(--ios26-glass-border-color-rgb), 1);
+    border-right-color: rgba(var(--ios26-glass-border-color-rgb), 0.8);
+    border-bottom-color: rgba(var(--ios26-glass-border-color-rgb), 1);
+    border-left-color: rgba(var(--ios26-glass-border-color-rgb), 0.6);
+  }
+
+  &.ion-color {
+    &::part(wrapper) {
+      @include api.glass-background(
+        $background-rgb: var(--ion-color-base-rgb),
+        $border-color-rgb: var(--ion-color-base-rgb),
+        $include-box-shadow: false,
+        $include-border: false
+      );
+      border-top-color: rgba(var(--ion-color-base-rgb), 1);
+      border-right-color: rgba(var(--ion-color-base-rgb), 0.8);
+      border-bottom-color: rgba(var(--ion-color-base-rgb), 1);
+      border-left-color: rgba(var(--ion-color-base-rgb), 0.6);
+    }
+  }
+}