@rdlabo/ionic-theme-ios27 0.1.0-beta.pr177.shaea4b7eeec994 → 0.2.1

package/node_modules/@rdlabo/ionic-theme-utils/src/styles/md-ion-list-inset.scss

@@ -0,0 +1,20 @@
+@use 'structured-list';
+
+@mixin theme($variant: classic, $disabled-selector: null) {
+  ion-list.md {
+    @include structured-list.support-text($disabled-selector: $disabled-selector);
+
+    &.list-inset {
+      @include structured-list.layout(8px, 16px, $variant: $variant, $disabled-selector: $disabled-selector);
+      :is(#{structured-list.$groups}) ion-item > ion-input[labelplacement='floating'] {
+        transition: transform 200ms ease;
+        &:not(.label-floating) {
+          transform: translateY(-7px);
+        }
+        &.label-floating {
+          transform: translateY(-4px);
+        }
+      }
+    }
+  }
+}

package/node_modules/@rdlabo/ionic-theme-utils/src/styles/structured-list.scss

@@ -0,0 +1,310 @@
+$groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group;
+
+@function _disabled-suffix($disabled-selector) {
+  @if $disabled-selector {
+    @return ':not(#{$disabled-selector})';
+  }
+
+  @return '';
+}
+
+// Derive neutral list colors from the application's Ionic medium palette.
+@mixin colors($supporting-opacity, $detail-opacity) {
+  ion-item {
+    --detail-icon-color: rgb(var(--ion-color-medium-rgb));
+    --detail-icon-opacity: #{$detail-opacity};
+  }
+
+  &.list-inset {
+    ion-list-header ion-label:not(.ion-color) {
+      color: rgba(var(--ion-color-medium-rgb), $supporting-opacity);
+    }
+
+    ion-list-header ion-note:not(.ion-color),
+    > ion-note:not(.ion-color) {
+      --color: rgba(var(--ion-color-medium-rgb), #{$supporting-opacity});
+    }
+  }
+}
+
+@mixin support-text($disabled-selector: null) {
+  $d: _disabled-suffix($disabled-selector);
+
+  ion-item#{$d} {
+    &:has(ion-input.input-fill-outline),
+    &:has(ion-textarea.textarea-fill-outline),
+    &:has(ion-select:is([helpertext]:not([helpertext='']), [errortext]:not([errortext='']))),
+    &:has(ion-input .input-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty))),
+    &:has(ion-textarea .textarea-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty))) {
+      --inner-border-width: 0;
+      --inner-padding-bottom: 4px;
+    }
+
+    ion-input#{$d} .input-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty)))),
+    ion-textarea#{$d} .textarea-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty)))) {
+      display: none;
+    }
+  }
+}
+
+@mixin layout($outer-note-inset, $group-border-radius, $variant: classic, $disabled-selector: null) {
+  $d: _disabled-suffix($disabled-selector);
+  $is-ios27: $variant == ios27;
+
+  background: transparent;
+
+  ion-list-header#{$d} {
+    display: flex;
+    align-items: center;
+
+    ion-label#{$d} {
+      @if $is-ios27 {
+        font-size: 1rem;
+        line-height: 1.29rem;
+        font-weight: 600;
+      } @else {
+        font-size: 0.9rem;
+      }
+      margin: 8px 4px 4px;
+
+      &:not(.ion-color) {
+        color: var(--ion-color-medium-tint);
+      }
+    }
+
+    ion-button#{$d} {
+      margin-top: 8px;
+    }
+
+    ion-note#{$d} {
+      @if $is-ios27 {
+        font-size: 0.76rem;
+        line-height: 1.06rem;
+        font-weight: 400;
+        margin-block: 8px 4px;
+        margin-inline: 0 16px;
+
+        &:not(.ion-color) {
+          --color: var(--ion-color-medium-tint);
+        }
+      } @else {
+        font-size: 0.9rem;
+        margin-block: 8px 4px;
+        margin-inline: 0 16px;
+      }
+    }
+  }
+
+  @if $is-ios27 {
+    ion-item-group.item-group-header#{$d} {
+      border-radius: $group-border-radius;
+
+      > ion-item#{$d} {
+        --inner-padding-end: 0;
+        --inner-border-width: 0;
+
+        &::part(native) {
+          padding-inline: 0;
+        }
+      }
+
+      & > ion-item#{$d} > ion-label#{$d} {
+        width: 100%;
+        margin: 0;
+        text-align: start;
+        white-space: normal;
+        padding: 16px 20px;
+
+        /**
+         * ion-header.header-collapse-condenseを使って、スクロールによってHeaderを変化させるトリック
+         */
+        ion-header.header-collapse-condense > ion-toolbar {
+          --min-height: 0;
+          visibility: hidden;
+        }
+
+        ion-icon#{$d} {
+          font-size: 2.82rem;
+          border-radius: 20%;
+          padding: 6px;
+          vertical-align: top;
+
+          &:not(.ion-color) {
+            color: #ffffff;
+          }
+        }
+
+        h2 {
+          font-size: 1.29rem;
+          font-weight: 700;
+          line-height: 1.53rem;
+          margin: 20px 0 8px;
+        }
+
+        ion-text#{$d} {
+          display: block;
+          font-size: 1rem;
+          line-height: 1.29rem;
+
+          &:not(.ion-color) {
+            color: var(--ion-color-step-500, var(--ion-text-color-step-500, #808080));
+          }
+        }
+      }
+    }
+  } @else {
+    ion-item-group.item-group-header#{$d} {
+      & > ion-item#{$d} > ion-label#{$d} {
+        width: 100%;
+        text-align: center;
+        padding: 32px 16px 16px;
+        transform: translateX(5px);
+
+        &:dir(rtl) {
+          transform: translateX(-5px);
+        }
+
+        /**
+         * ion-header.header-collapse-condenseを使って、スクロールによってHeaderを変化させるトリック
+         */
+        ion-header.header-collapse-condense > ion-toolbar {
+          --min-height: 0;
+          visibility: hidden;
+        }
+
+        ion-icon#{$d} {
+          font-size: 2.8rem;
+          border-radius: 20%;
+          padding: 6px;
+
+          &:not(.ion-color) {
+            color: #ffffff;
+          }
+        }
+
+        h2 {
+          font-size: 1.2rem;
+          font-weight: bold;
+          margin-top: 8px;
+        }
+
+        ion-text#{$d} {
+          font-size: 0.9rem;
+        }
+      }
+    }
+  }
+
+  > :is(#{$groups})#{$d} {
+    display: block;
+    border-radius: $group-border-radius;
+    overflow: hidden;
+
+    &:has(> .radio-group-top) {
+      display: flex;
+      flex-direction: column;
+      border-radius: 0;
+      overflow: visible;
+
+      > .radio-group-top {
+        order: 1;
+        font-size: 0.9rem;
+        padding-block-start: 8px;
+      }
+
+      > ion-item#{$d}:first-of-type {
+        --border-radius: #{$group-border-radius} #{$group-border-radius} 0 0;
+      }
+
+      > ion-item#{$d}:last-of-type {
+        --border-radius: 0 0 #{$group-border-radius} #{$group-border-radius};
+      }
+    }
+
+    &:not(:first-of-type) {
+      margin-top: 16px;
+    }
+
+    ion-item#{$d} {
+      &:has(> ion-label:not([slot])):has(> ion-note:not([slot])) {
+        &::part(container) {
+          flex-direction: column;
+          justify-content: center;
+          padding-top: 14px;
+          padding-bottom: 14px;
+          min-height: 64px;
+        }
+        & > ion-label#{$d},
+        & > ion-note#{$d} {
+          width: auto;
+          align-self: flex-start;
+        }
+        & > ion-label#{$d} {
+          margin: 0;
+          font-weight: 500;
+          @if $is-ios27 {
+            font-size: 1rem;
+            line-height: 1.29rem;
+          } @else {
+            font-size: 1.15rem;
+            line-height: 0.9rem;
+          }
+        }
+        & > ion-note#{$d} {
+          @if $is-ios27 {
+            font-size: 0.88rem;
+            line-height: 1.18rem;
+          } @else {
+            font-size: 0.85rem;
+          }
+        }
+      }
+
+      ion-text[slot='end']#{$d} {
+        padding-inline-start: 8px;
+      }
+
+      &.item-disabled {
+        --detail-icon-opacity: 0.1;
+        opacity: 1;
+
+        & > * {
+          opacity: 0.4;
+        }
+      }
+
+      ion-button[slot='end']#{$d} {
+        &.ion-align-self-end {
+          transform: translateY(-7px);
+        }
+        ion-icon[slot='icon-only']#{$d} {
+          font-size: 1.2rem;
+          transform: translateY(4px);
+        }
+      }
+    }
+  }
+
+  & > ion-note#{$d} {
+    margin-block: 8px;
+    margin-inline: calc(var(--ion-safe-area-left, 0) + $outer-note-inset) calc(var(--ion-safe-area-right, 0) + $outer-note-inset);
+
+    &:dir(rtl) {
+      margin-inline: calc(var(--ion-safe-area-right, 0) + $outer-note-inset) calc(var(--ion-safe-area-left, 0) + $outer-note-inset);
+    }
+
+    @if $is-ios27 {
+      font-size: 0.76rem;
+      line-height: 1.06rem;
+      font-weight: 400;
+      display: block;
+      &:not(.ion-color) {
+        --color: var(--ion-color-medium-tint);
+      }
+    } @else {
+      --color: var(--ion-color-medium-tint);
+      font-size: 0.9rem;
+      display: block;
+    }
+  }
+}

package/node_modules/@rdlabo/ionic-theme-utils/src/tab-bar-searchable/interfaces.ts

@@ -0,0 +1,28 @@
+export enum TabBarSearchableType {
+  Enter = 'enter',
+  Leave = 'leave',
+}
+
+export type TabBarSearchableFunction = (event: Event, type: TabBarSearchableType) => Promise<void>;
+
+export interface SearchableEventCache {
+  elementSizes: ElementSizes;
+  colorSelected: string;
+}
+
+// DOM要素とサイズ情報の型定義
+export interface ElementSizes {
+  tabBar: { width: number; height: number };
+  closeButton: { width: number; height: number };
+  fabButton: { width: number; height: number };
+  searchContainer: { width: number; height: number };
+  selectedTabButtonIcon: { width: number; height: number; top: number; left: number };
+}
+
+export interface ElementReferences {
+  searchContainer: HTMLElement;
+  closeButtons: HTMLElement;
+  selectedTabButton: HTMLElement;
+  selectedTabButtonIcon: HTMLElement;
+  closeButtonIcon: HTMLElement;
+}

package/node_modules/@rdlabo/ionic-theme-utils/src/tab-bar-searchable/utils.spec.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { getElement, getElementReferences, getElementSizes } from './utils';
+
+const rect = (width: number, height: number, top = 0, left = 0) => ({ width, height, top, left }) as DOMRect;
+
+describe('tab bar searchable utilities', () => {
+  it('reports a missing required element with its selector', () => {
+    expect(() => getElement(document.createElement('div'), '.missing')).toThrow('Expected click element to be inside `.missing`');
+  });
+
+  it('collects the elements used by the searchable animation', () => {
+    const tabBar = document.createElement('ion-tab-bar');
+    tabBar.innerHTML = '<ion-tab-button class="tab-selected"><ion-icon></ion-icon></ion-tab-button>';
+    const footer = document.createElement('ion-footer');
+    footer.innerHTML =
+      '<ion-searchbar><div class="searchbar-input-container"></div></ion-searchbar><ion-buttons slot="start"><ion-button><ion-icon></ion-icon></ion-button></ion-buttons>';
+
+    const references = getElementReferences(tabBar, footer);
+
+    expect(references.selectedTabButton).toBe(tabBar.querySelector('.tab-selected'));
+    expect(references.searchContainer).toBe(footer.querySelector('.searchbar-input-container'));
+    expect(references.closeButtonIcon.tagName).toBe('ION-ICON');
+  });
+
+  it('normalizes bounding rectangles to the shared size model', () => {
+    const tabBar = document.createElement('ion-tab-bar');
+    const fab = document.createElement('ion-fab-button');
+    const closeButtons = document.createElement('ion-buttons');
+    const searchContainer = document.createElement('div');
+    const selectedTabButtonIcon = document.createElement('ion-icon');
+    const selectedTabButton = document.createElement('ion-tab-button');
+    const closeButtonIcon = document.createElement('ion-icon');
+    vi.spyOn(tabBar, 'getBoundingClientRect').mockReturnValue(rect(390, 80));
+    vi.spyOn(fab, 'getBoundingClientRect').mockReturnValue(rect(56, 56));
+    vi.spyOn(closeButtons, 'getBoundingClientRect').mockReturnValue(rect(44, 44));
+    vi.spyOn(searchContainer, 'getBoundingClientRect').mockReturnValue(rect(270, 44));
+    vi.spyOn(selectedTabButtonIcon, 'getBoundingClientRect').mockReturnValue(rect(24, 24, 12, 18));
+
+    expect(
+      getElementSizes(tabBar, fab, {
+        closeButtons,
+        searchContainer,
+        selectedTabButton,
+        selectedTabButtonIcon,
+        closeButtonIcon,
+      }),
+    ).toEqual({
+      tabBar: { width: 390, height: 80 },
+      closeButton: { width: 44, height: 44 },
+      fabButton: { width: 56, height: 56 },
+      searchContainer: { width: 270, height: 44 },
+      selectedTabButtonIcon: { width: 24, height: 24, top: 12, left: 18 },
+    });
+  });
+});

package/node_modules/@rdlabo/ionic-theme-utils/src/tab-bar-searchable/utils.ts

@@ -0,0 +1,75 @@
+import { ElementReferences, ElementSizes } from './interfaces';
+
+export const ANIMATION_DURATION = 400;
+export const ANIMATION_DELAY_BASE = 140;
+export const ANIMATION_DELAY_CLOSE_BUTTONS = 240;
+export const ANIMATION_EASING = 'cubic-bezier(0, 1, 0.22, 1)';
+export const OPACITY_TRANSITION = 'opacity 140ms ease';
+
+export const throwErrorByFailedClickElement = (selector: string): Error => {
+  return new Error('Expected click element to be inside `' + selector + '`');
+};
+
+export const throwErrorByFailedExistElement = (selector: string): Error => {
+  return new Error('Expected element `' + selector + '` to exist');
+};
+
+export const getElement = (docs: HTMLElement, selector: string): HTMLElement => {
+  const el = docs.querySelector<HTMLElement>(selector);
+  if (!el) {
+    throw throwErrorByFailedClickElement(selector);
+  }
+  return el;
+};
+
+export const getElementReferences = (ionTabBar: HTMLElement, ionFooter: HTMLElement): ElementReferences => {
+  const searchContainer = getElement(ionFooter, 'ion-searchbar .searchbar-input-container');
+  const closeButtons = getElement(ionFooter, 'ion-buttons[slot=start]');
+  const selectedTabButton = ionTabBar.querySelector<HTMLElement>('ion-tab-button.tab-selected');
+  const selectedTabButtonIcon = selectedTabButton?.querySelector('ion-icon');
+  const closeButtonIcon = closeButtons.querySelector('ion-icon');
+
+  if (!selectedTabButton) {
+    throw throwErrorByFailedExistElement('ion-tab-button.tab-selected');
+  }
+
+  if (!selectedTabButtonIcon) {
+    throw throwErrorByFailedExistElement('ion-tab-button.tab-selected ion-icon');
+  }
+
+  if (!closeButtonIcon) {
+    throw throwErrorByFailedExistElement('ion-buttons[slot=start] ion-button ion-icon');
+  }
+
+  return {
+    searchContainer,
+    closeButtons,
+    selectedTabButton,
+    selectedTabButtonIcon,
+    closeButtonIcon,
+  };
+};
+
+/**
+ * 各要素のサイズ情報を取得
+ */
+export const getElementSizes = (ionTabBar: HTMLElement, ionFabButton: HTMLElement, references: ElementReferences): ElementSizes => {
+  const tabBarRect = ionTabBar.getBoundingClientRect();
+  const fabButtonRect = ionFabButton.getBoundingClientRect();
+  const closeButtonRect = references.closeButtons.getBoundingClientRect();
+  const searchContainerRect = references.searchContainer.getBoundingClientRect();
+  const selectedTabButtonIconRect = references.selectedTabButtonIcon!.getBoundingClientRect();
+
+  return {
+    tabBar: { width: tabBarRect.width, height: tabBarRect.height },
+    closeButton: { width: closeButtonRect.width, height: closeButtonRect.height },
+    fabButton: { width: fabButtonRect.width, height: fabButtonRect.height },
+    searchContainer: { width: searchContainerRect.width, height: searchContainerRect.height },
+    selectedTabButtonIcon: {
+      width: selectedTabButtonIconRect.width,
+      height: selectedTabButtonIconRect.height,
+      top: selectedTabButtonIconRect.top,
+      left: selectedTabButtonIconRect.left,
+    },
+  };
+};

package/node_modules/@rdlabo/ionic-theme-utils/src/theme.ts

@@ -0,0 +1,51 @@
+import type { IonicConfig } from '@ionic/core';
+import type { AnimationPosition } from './sheets-of-glass';
+
+export const cloneElement = (tagName: string, useCache: boolean = true): HTMLElement => {
+  if (useCache) {
+    const cachedElement = document.querySelector(`${tagName}.ion-cloned-element`);
+    if (cachedElement !== null) return cachedElement as HTMLElement;
+  }
+  const clonedEl = document.createElement(tagName);
+  clonedEl.classList.add('ion-cloned-element');
+  clonedEl.style.setProperty('display', 'none');
+  document.body.appendChild(clonedEl);
+  return clonedEl;
+};
+
+export const getStep = (targetX: number, position: AnimationPosition) => {
+  const currentX = targetX - position.width / 2;
+  return Math.max(0, Math.min(1, (currentX - position.minPositionX) / (position.maxPositionX - position.minPositionX)));
+};
+
+export const changeSelectedElement = (target: HTMLElement, selected: HTMLElement, tagName: string, selectedClass: string): void => {
+  target.querySelectorAll(tagName).forEach((element) => {
+    element.classList.remove(selectedClass, 'ion-activated');
+  });
+  selected.classList.add('ion-activated');
+};
+
+export class Config {
+  private values = new Map<keyof IonicConfig, unknown>();
+  reset(config: IonicConfig) {
+    this.values = new Map(Object.entries(config) as [keyof IonicConfig, unknown][]);
+  }
+  get<T = unknown>(key: keyof IonicConfig, fallback?: T): T {
+    const value = this.values.get(key);
+    return (value !== undefined ? value : fallback) as T;
+  }
+  getBoolean(key: keyof IonicConfig, fallback = false): boolean {
+    const value = this.values.get(key);
+    if (value === undefined) return fallback;
+    return typeof value === 'string' ? value === 'true' : !!value;
+  }
+  getNumber(key: keyof IonicConfig, fallback?: number): number {
+    const value = Number.parseFloat(String(this.values.get(key)));
+    return Number.isNaN(value) ? (fallback ?? Number.NaN) : value;
+  }
+  set(key: keyof IonicConfig, value: unknown) {
+    this.values.set(key, value);
+  }
+}
+
+export const config = /* @__PURE__ */ new Config();

package/node_modules/@rdlabo/ionic-theme-utils/src/transition/ios.transition.spec.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest';
+
+import { createIosTransitionAnimation } from './ios.transition';
+
+const createPage = (translucent = false) => {
+  const page = document.createElement('div');
+  const header = document.createElement('ion-header');
+  if (translucent) {
+    header.classList.add('header-translucent');
+  }
+  page.append(header, document.createElement('ion-content'));
+  return page;
+};
+
+const createTransition = (radius?: number) => {
+  const nav = document.createElement('ion-router-outlet');
+  const enteringEl = createPage(true);
+  const leavingEl = createPage();
+  nav.append(leavingEl, enteringEl);
+  document.body.append(nav);
+
+  const animation = createIosTransitionAnimation({
+    offLeftPercent: 30,
+    radius,
+    getIonPageElement: (element) => element,
+  })(nav, { enteringEl, leavingEl });
+
+  return { animation, enteringEl, nav };
+};
+
+describe('createIosTransitionAnimation radius', () => {
+  it('does not apply a page clip when radius is omitted', () => {
+    const { animation, enteringEl, nav } = createTransition();
+
+    animation.progressStart(true);
+
+    expect(enteringEl.style.clipPath).toBe('');
+    animation.destroy();
+    nav.remove();
+  });
+
+  it('applies the configured radius', () => {
+    const { animation, enteringEl, nav } = createTransition(48);
+    enteringEl.style.clipPath = 'inset(1px)';
+
+    animation.progressStart(true);
+
+    expect(enteringEl.style.clipPath).toBe('inset(0 round 48px)');
+    animation.destroy();
+    nav.remove();
+  });
+});