@rdlabo/ionic-theme-ios27 1.0.4 → 1.1.0-beta.pr224.shac63de393e27b

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

@@ -1,20 +0,0 @@
-@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

@@ -1,310 +0,0 @@
-$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

@@ -1,28 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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();
-  });
-});