@rdlabo/ionic-theme-ios27 0.1.0-0

package/src/styles/utils/structured-list.scss

@@ -0,0 +1,170 @@
+$groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group;
+
+@mixin support-text() {
+  ion-item {
+    &: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 .input-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty)))),
+    ion-textarea .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) {
+  background: transparent;
+
+  ion-list-header {
+    display: flex;
+    align-items: center;
+
+    ion-label {
+      font-size: 0.9rem;
+      margin: 8px 4px 4px;
+
+      &:not(.ion-color) {
+        color: var(--ion-color-medium-tint);
+      }
+    }
+
+    ion-button {
+      margin-top: 8px;
+    }
+
+    ion-note {
+      font-size: 0.9rem;
+      margin: 8px 16px 4px 0;
+    }
+  }
+
+  ion-item-group.item-group-header {
+    & > ion-item > ion-label {
+      width: 100%;
+      text-align: center;
+      padding: 32px 16px 16px;
+      transform: translateX(5px);
+
+      /**
+       * ion-header.header-collapse-condenseを使って、スクロールによってHeaderを変化させるトリック
+       */
+      ion-header.header-collapse-condense > ion-toolbar {
+        --min-height: 0;
+        visibility: hidden;
+      }
+
+      ion-icon {
+        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 {
+        font-size: 0.9rem;
+      }
+    }
+  }
+
+  > :is(#{$groups}) {
+    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:first-of-type {
+        --border-radius: #{$group-border-radius} #{$group-border-radius} 0 0;
+      }
+
+      > ion-item:last-of-type {
+        --border-radius: 0 0 #{$group-border-radius} #{$group-border-radius};
+      }
+    }
+
+    &:not(:first-of-type) {
+      margin-top: 16px;
+    }
+
+    ion-item {
+      &: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,
+        & > ion-note {
+          width: auto;
+          align-self: flex-start;
+        }
+        & > ion-label {
+          margin: 0;
+          font-weight: 500;
+          font-size: 1.15rem;
+          line-height: 0.9rem;
+        }
+        & > ion-note {
+          font-size: 0.85rem;
+        }
+      }
+
+      ion-text[slot='end'] {
+        padding-left: 8px;
+      }
+
+      &.item-disabled {
+        --detail-icon-opacity: 0.1;
+        opacity: 1;
+
+        & > * {
+          opacity: 0.4;
+        }
+      }
+
+      ion-button[slot='end'] {
+        &.ion-align-self-end {
+          transform: translateY(-7px);
+        }
+        ion-icon[slot='icon-only'] {
+          font-size: 1.2rem;
+          transform: translateY(4px);
+        }
+      }
+    }
+  }
+
+  & > ion-note {
+    --color: var(--ion-color-medium-tint);
+    font-size: 0.9rem;
+    display: block;
+    margin: 8px calc(var(--ion-safe-area-right, 0) + $outer-note-inset) 8px calc(var(--ion-safe-area-left, 0) + $outer-note-inset);
+  }
+}

package/src/styles/utils/theme-dark.scss

@@ -0,0 +1,25 @@
+@forward 'dark/ion-button';
+@use 'dark/ion-button' as *;
+@forward 'dark/ion-fab';
+@use 'dark/ion-fab' as *;
+@forward 'dark/ion-tabs';
+@use 'dark/ion-tabs' as *;
+@forward 'dark/ion-segment';
+@use 'dark/ion-segment' as *;
+
+@mixin default-variables {
+  //--ios26-glass-background-rgb: 35, 35, 35;
+  --ios26-glass-background-rgb: 62, 62, 62;
+  --ios26-glass-box-shadow-color-rgb: 0, 0, 0 / 0;
+  --ios26-glass-border-color-rgb: 68, 68, 68;
+  --ios26-button-color-selected-rgb: 255, 255, 255;
+
+  --ios26-content-box-shadow-rgb: 0, 0, 0;
+}
+
+@mixin theme-dark {
+  @include ion-button;
+  @include ion-fab;
+  @include ion-tabs;
+  @include ion-segment;
+}

package/src/styles/utils/translucent.scss

@@ -0,0 +1,95 @@
+@use 'api';
+
+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;
+    --opacity: 1;
+    &::part(background) {
+      --opacity: 0;
+    }
+    ion-title {
+      transform: translateY(0);
+    }
+  }
+}
+
+ion-header.ios:not(.ios26-disabled).header-translucent:not(.header-collapse-condense) {
+  &:has(> ion-toolbar.ios:not(.ios26-disabled) > *)::before {
+    height: 100%;
+    background: rgba(var(--ion-color-base-rgb, var(--ios26-content-box-shadow-rgb)), calc(0.2 * var(--opacity-scale, 1)));
+    backdrop-filter: blur(8px);
+  }
+
+  &:not(.ion-no-border) > ion-toolbar.ios:not(.ios26-disabled):has(> *):last-of-type {
+    --border-width: 0 0 0.5px;
+    --border-color: var(--ion-toolbar-border-color, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08));
+    &::part(background) {
+      --opacity: 1;
+      background: transparent;
+    }
+  }
+}
+
+ion-header.ios:not(.ios26-disabled).header-collapse-main ion-toolbar.in-toolbar ion-title {
+  transition:
+    opacity 0.5s ease-in-out,
+    color 0.5s ease-in-out,
+    text-shadow 0.5s ease-in-out,
+    transform 0.5s ease-in-out;
+}
+
+ion-header.ios:not(.ios26-disabled).header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title {
+  color: transparent;
+  text-shadow: 0 0 1px var(--ion-color-base, var(--ion-toolbar-color, var(--ion-text-color, #000)));
+  transform: translateY(8px);
+}
+
+ion-header.ios:not(.ios26-disabled).header-translucent::before,
+ion-header.ios:not(.ios26-disabled).header-translucent::after,
+ion-content.ios:not(.ios26-disabled).content-fullscreen::part(background)::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+ion-header.ios:not(.ios26-disabled).header-translucent::before {
+  /**
+   * With safe-area effect, this is need.
+   */
+  z-index: 2;
+  top: 0;
+  height: var(--ion-safe-area-top);
+}
+
+ion-header.ios:not(.ios26-disabled).header-translucent::after {
+  z-index: 2;
+  top: 0;
+  height: 100%;
+  backdrop-filter: blur(2px);
+  mask-image: linear-gradient(rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
+  mask-composite: intersect;
+}
+
+/**
+ * ここから下は、ion-content::beforeが content:'' を持たない限り表示されない
+ */
+.ion-page:has(> ion-header.header-translucent) > ion-content.content-fullscreen::part(background)::before {
+  z-index: 2;
+  top: 0;
+  height: var(--offset-top, 0px);
+  background: linear-gradient(
+    in oklab,
+    rgba(var(--ios26-content-box-shadow-rgb), 0.5) 0%,
+    rgba(var(--ios26-content-box-shadow-rgb), 0.2) 50%,
+    rgba(var(--ios26-content-box-shadow-rgb), 0) 100%
+  );
+}

package/src/tab-bar-searchable/animations/enter.ts

@@ -0,0 +1,92 @@
+import { ElementReferences, ElementSizes } from '../interfaces';
+import { Animation, createAnimation } from '@ionic/core';
+import { cloneElement } from '../../utils';
+import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION } from '../utils';
+
+export const createEffectAnimation = (references: ElementReferences, sizes: ElementSizes): Animation => {
+  const effectElement = cloneElement('ion-icon');
+  const closeButtonRect = references.closeButtonIcon?.getBoundingClientRect();
+  const iconName = references.selectedTabButtonIcon?.getAttribute('name');
+  const selectedTabButtonIconRect = references.selectedTabButtonIcon?.getBoundingClientRect();
+
+  return createAnimation()
+    .addElement(effectElement)
+    .beforeAddWrite(() => {
+      effectElement.style.display = 'inline-block';
+      references.closeButtonIcon.style.opacity = '0';
+      if (iconName && closeButtonRect) {
+        effectElement.setAttribute('name', iconName);
+        effectElement.style.width = `${closeButtonRect.width}px`;
+        effectElement.style.height = `${closeButtonRect.height}px`;
+      }
+    })
+    .afterAddWrite(() => {
+      effectElement.style.display = 'none';
+      references.closeButtonIcon.style.opacity = '1';
+    })
+    .fromTo(
+      'transform',
+      `translate3d(${selectedTabButtonIconRect.left}px, ${selectedTabButtonIconRect.top}px, 0)`,
+      `translate3d(${closeButtonRect.left}px, ${closeButtonRect.top}px, 0)`,
+    );
+};
+
+export const createSearchContainerAnimation = (references: ElementReferences, sizes: ElementSizes): Animation => {
+  return createAnimation()
+    .addElement(references.searchContainer)
+    .beforeAddWrite(() => (references.searchContainer.style.transformOrigin = 'right center'))
+    .fromTo(
+      'transform',
+      `scale(${sizes.fabButton.width / sizes.searchContainer.width}, ${sizes.fabButton.height / sizes.searchContainer.height})`,
+      'scale(1)',
+    )
+    .fromTo('opacity', '0.2', '1');
+};
+
+export const createCloseButtonsAnimation = (references: ElementReferences): Animation => {
+  return createAnimation()
+    .delay(ANIMATION_DELAY_CLOSE_BUTTONS)
+    .addElement(references.closeButtons)
+    .beforeAddWrite(() => (references.closeButtons.style.transformOrigin = 'left center'))
+    .afterClearStyles(['transform', 'transform-origin'])
+    .fromTo('transform', 'scale(1.5, 1)', 'scale(1)');
+};
+
+export const createTabBarAnimation = (ionTabBar: HTMLElement, references: ElementReferences, sizes: ElementSizes): Animation => {
+  return createAnimation()
+    .addElement(ionTabBar)
+    .beforeAddWrite(() => {
+      ionTabBar.querySelectorAll<HTMLElement>('ion-tab-button').forEach((element: HTMLElement) => {
+        element.style.transition = OPACITY_TRANSITION;
+        element.style.opacity = '0';
+      });
+      references.selectedTabButton.classList.remove('tab-selected');
+      const iconName = references.selectedTabButtonIcon?.getAttribute('name');
+      if (iconName) {
+        references.closeButtonIcon?.setAttribute('name', iconName);
+      }
+    })
+    .afterAddWrite(() => {
+      references.selectedTabButton.classList.add('tab-selected');
+      ionTabBar.style.pointerEvents = 'none';
+    })
+    .fromTo(
+      'transform',
+      'scale(1)',
+      `scale(${sizes.closeButton.width / sizes.tabBar.width}, ${sizes.closeButton.height / sizes.tabBar.height})`,
+    )
+    .fromTo('opacity', '1', '0');
+};
+
+export const createFabButtonAnimation = (ionFabButton: HTMLElement): Animation => {
+  return createAnimation()
+    .addElement(ionFabButton)
+    .beforeAddWrite(() => {
+      ionFabButton.style.transformOrigin = 'center right';
+      ionFabButton.querySelector<HTMLElement>('ion-icon')?.style.setProperty('opacity', '0');
+    })
+    .afterAddWrite(() => {
+      ionFabButton.style.pointerEvents = 'none';
+    })
+    .fromTo('opacity', '1', '0');
+};

package/src/tab-bar-searchable/animations/leave.ts

@@ -0,0 +1,89 @@
+import { ElementReferences, ElementSizes } from '../interfaces';
+import { Animation, createAnimation } from '@ionic/core';
+import { cloneElement } from '../../utils';
+import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION } from '../utils';
+
+export const createReverseEffectAnimation = (
+  references: ElementReferences,
+  searchableElementSizes: ElementSizes,
+  colorSelected: string,
+): Animation => {
+  const effectElement = cloneElement('ion-icon');
+  const closeButtonRect = references.closeButtonIcon?.getBoundingClientRect();
+
+  return createAnimation()
+    .addElement(effectElement)
+    .beforeAddWrite(() => {
+      effectElement.style.display = 'inline-block';
+      references.closeButtonIcon.style.opacity = '0';
+      if (searchableElementSizes.selectedTabButtonIcon) {
+        effectElement.style.width = `${searchableElementSizes.selectedTabButtonIcon.width}px`;
+        effectElement.style.height = `${searchableElementSizes.selectedTabButtonIcon.height}px`;
+        effectElement.style.color = colorSelected;
+      }
+    })
+    .afterAddWrite(() => {
+      effectElement.style.display = 'none';
+      references.closeButtonIcon.style.opacity = '1';
+      effectElement.style.color = '';
+    })
+    .fromTo(
+      'transform',
+      `translate3d(${closeButtonRect.left}px, ${closeButtonRect.top}px, 0)`,
+      `translate3d(${searchableElementSizes.selectedTabButtonIcon.left}px, ${searchableElementSizes.selectedTabButtonIcon.top}px, 0)`,
+    );
+};
+
+export const createReverseSearchContainerAnimation = (references: ElementReferences, sizes: ElementSizes): Animation => {
+  return createAnimation()
+    .addElement(references.searchContainer)
+    .beforeAddWrite(() => (references.searchContainer.style.transformOrigin = 'right center'))
+    .fromTo(
+      'transform',
+      'scale(1)',
+      `scale(${sizes.fabButton.width / sizes.searchContainer.width}, ${sizes.fabButton.height / sizes.searchContainer.height})`,
+    )
+    .fromTo('opacity', '1', '0.2');
+};
+
+export const createReverseCloseButtonsAnimation = (references: ElementReferences): Animation => {
+  return createAnimation()
+    .delay(ANIMATION_DELAY_CLOSE_BUTTONS)
+    .addElement(references.closeButtons)
+    .beforeAddWrite(() => (references.closeButtons.style.transformOrigin = 'left center'))
+    .afterClearStyles(['transform', 'transform-origin'])
+    .fromTo('transform', 'scale(1)', 'scale(1.5, 1)');
+};
+
+export const createReverseTabBarAnimation = (ionTabBar: HTMLElement, references: ElementReferences, sizes: ElementSizes): Animation => {
+  return createAnimation()
+    .addElement(ionTabBar)
+    .beforeAddWrite(() => {
+      ionTabBar.style.pointerEvents = 'auto';
+      ionTabBar.querySelectorAll<HTMLElement>('ion-tab-button').forEach((element: HTMLElement) => {
+        element.style.transition = OPACITY_TRANSITION;
+        element.style.opacity = '1';
+      });
+    })
+    .afterClearStyles(['transform', 'opacity'])
+    .fromTo(
+      'transform',
+      `scale(${sizes.closeButton.width / sizes.tabBar.width}, ${sizes.closeButton.height / sizes.tabBar.height})`,
+      'scale(1)',
+    )
+    .fromTo('opacity', '0', '1');
+};
+
+export const createReverseFabButtonAnimation = (ionFabButton: HTMLElement, references: ElementSizes): Animation => {
+  return createAnimation()
+    .addElement(ionFabButton)
+    .beforeAddWrite(() => {
+      ionFabButton.querySelector<HTMLElement>('ion-icon')?.style.setProperty('opacity', '1');
+      ionFabButton.style.transformOrigin = 'center right';
+    })
+    .afterAddWrite(() => {
+      ionFabButton.style.pointerEvents = 'auto';
+    })
+    .fromTo('opacity', '0', '1')
+    .fromTo('transform', `scale(${references.searchContainer.height / references.fabButton.height})`, 'scale(1)');
+};

package/src/tab-bar-searchable/index.ts

@@ -0,0 +1,141 @@
+import { createAnimation } from '@ionic/core';
+import {
+  ANIMATION_DELAY_BASE,
+  ANIMATION_DURATION,
+  ANIMATION_EASING,
+  getElementReferences,
+  getElementSizes,
+  throwErrorByFailedClickElement,
+} from './utils';
+import { SearchableEventCache, TabBarSearchableFunction, TabBarSearchableType } from './interfaces';
+import {
+  createCloseButtonsAnimation,
+  createEffectAnimation,
+  createFabButtonAnimation,
+  createSearchContainerAnimation,
+  createTabBarAnimation,
+} from './animations/enter';
+import {
+  createReverseCloseButtonsAnimation,
+  createReverseEffectAnimation,
+  createReverseFabButtonAnimation,
+  createReverseSearchContainerAnimation,
+  createReverseTabBarAnimation,
+} from './animations/leave';
+
+export * from './interfaces';
+
+/**
+ *  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+ *   <ion-fab-button (click)="present($event)">
+ *     <ion-icon name="search"></ion-icon>
+ *   </ion-fab-button>
+ *  </ion-fab>
+ *  <ion-footer [translucent]="true">
+ *   <ion-toolbar>
+ *     <ion-buttons slot="start">
+ *     <!-- ion-icon does not need `name` attribute. -->
+ *       <ion-button fill="default"><ion-icon slot="icon-only"></ion-icon>
+ *     </ion-button>
+ *     </ion-buttons>
+ *     <!-- User set `ionChange` or other events. -->
+ *     <ion-searchbar (ionChange)="example($event)"></ion-searchbar>
+ *   </ion-toolbar>
+ *  </ion-footer>
+ **/
+
+export const attachTabBarSearchable = (
+  ionTabBar: HTMLElement,
+  ionFabButton: HTMLElement,
+  ionFooter: HTMLElement,
+): TabBarSearchableFunction => {
+  if (!ionTabBar || !ionFabButton || !ionFooter) {
+    throw new Error('TabBarSearchable should be defined with props');
+  }
+  // Initialize
+  ionFooter.style.pointerEvents = 'none';
+  ionFooter.style.opacity = '0';
+  ionTabBar.style.transformOrigin = 'left center';
+
+  // Saved Params
+  let searchableEventCache: SearchableEventCache | undefined;
+
+  return async (event: Event, type: TabBarSearchableType) => {
+    if (type === TabBarSearchableType.Enter) {
+      searchableEventCache = await enterEvent(event, ionTabBar, ionFabButton, ionFooter);
+    } else if (searchableEventCache !== undefined) {
+      await leaveEvent(event, searchableEventCache, ionTabBar, ionFabButton, ionFooter);
+      searchableEventCache = undefined;
+    } else {
+      throw new Error('TabBarSearchableType.Leave should be run after TabBarSearchableType.Enter');
+    }
+  };
+};
+
+const enterEvent = async (
+  event: Event,
+  ionTabBar: HTMLElement,
+  ionFabButton: HTMLElement,
+  ionFooter: HTMLElement,
+): Promise<SearchableEventCache> => {
+  if (!(event.target as HTMLElement)?.closest('ion-fab-button')) {
+    throw throwErrorByFailedClickElement('ion-fab-button');
+  }
+
+  const references = getElementReferences(ionTabBar, ionFooter);
+  const sizes = getElementSizes(ionTabBar, ionFabButton, references);
+  const colorSelected = references.selectedTabButton
+    ? getComputedStyle(references.selectedTabButton).getPropertyValue('--color-selected').trim()
+    : '';
+
+  const effectAnimation = createEffectAnimation(references, sizes);
+  const searchContainerAnimation = createSearchContainerAnimation(references, sizes);
+  const closeButtonsAnimation = createCloseButtonsAnimation(references);
+  const tabBarAnimation = createTabBarAnimation(ionTabBar, references, sizes);
+  const fabButtonAnimation = createFabButtonAnimation(ionFabButton);
+
+  await createAnimation()
+    .delay(ANIMATION_DELAY_BASE)
+    .duration(ANIMATION_DURATION)
+    .easing(ANIMATION_EASING)
+    .addElement(ionFooter)
+    .afterAddWrite(() => (ionFooter.style.pointerEvents = 'auto'))
+    .fromTo('opacity', '0.8', '1')
+    .addAnimation([tabBarAnimation, fabButtonAnimation, searchContainerAnimation, effectAnimation, closeButtonsAnimation])
+    .play();
+
+  return {
+    elementSizes: sizes,
+    colorSelected,
+  };
+};
+
+const leaveEvent = async (
+  event: Event,
+  searchableEventCache: SearchableEventCache,
+  ionTabBar: HTMLElement,
+  ionFabButton: HTMLElement,
+  ionFooter: HTMLElement,
+): Promise<void> => {
+  if (!(event.target as HTMLElement)?.closest('ion-buttons[slot=start] ion-button')) {
+    throw throwErrorByFailedClickElement('ion-buttons[slot=start] ion-button');
+  }
+
+  const references = getElementReferences(ionTabBar, ionFooter);
+
+  const effectAnimation = createReverseEffectAnimation(references, searchableEventCache.elementSizes, searchableEventCache.colorSelected);
+  const searchContainerAnimation = createReverseSearchContainerAnimation(references, searchableEventCache.elementSizes);
+  const closeButtonsAnimation = createReverseCloseButtonsAnimation(references);
+  const tabBarAnimation = createReverseTabBarAnimation(ionTabBar, references, searchableEventCache.elementSizes);
+  const fabButtonAnimation = createReverseFabButtonAnimation(ionFabButton, searchableEventCache.elementSizes);
+
+  await createAnimation()
+    .delay(ANIMATION_DELAY_BASE)
+    .duration(ANIMATION_DURATION)
+    .easing(ANIMATION_EASING)
+    .addElement(ionFooter)
+    .afterAddWrite(() => (ionFooter.style.pointerEvents = 'none'))
+    .fromTo('opacity', '1', '0')
+    .addAnimation([tabBarAnimation, fabButtonAnimation, searchContainerAnimation, effectAnimation, closeButtonsAnimation])
+    .play();
+};

package/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;
+}