@rdlabo/ionic-theme-ios26 0.0.4 → 0.1.0

package/demo/src/app/index/index-page.component.html

@@ -23,10 +23,10 @@
   </ion-list>
 
   <ion-list [inset]="true">
-    <ion-list-header><ion-label>Enable Demo</ion-label></ion-list-header>
+    <ion-list-header><ion-label>Ready</ion-label></ion-list-header>
     <ion-item-group>
       @for (item of enableComponents(); track item.name) {
-        <ion-item [disabled]="!item.enable" [button]="item.enable" (click)="navigateComponent(item)">
+        <ion-item [button]="true" (click)="navigateComponent(item)">
           <ion-label>{{ item.name }}</ion-label>
         </ion-item>
       }
@@ -35,15 +35,17 @@
   </ion-list>
 
   <ion-list [inset]="true">
-    <ion-list-header><ion-label>Disable Demo</ion-label></ion-list-header>
+    <ion-list-header><ion-label>Spec Limitation</ion-label></ion-list-header>
     <ion-item-group>
       @for (item of disableComponents(); track item.name) {
-        <ion-item [disabled]="!item.enable" [button]="item.enable">
+        <ion-item [button]="true" (click)="navigateComponent(item)">
           <ion-label>{{ item.name }}</ion-label>
-          <ion-text>WIP</ion-text>
         </ion-item>
       }
     </ion-item-group>
-    <ion-note>These components are under development. However, that doesn't mean they can't be used.</ion-note>
+    <ion-note
+      >Some HTML elements or APIs are missing, which limits what can be implemented. This is currently being discussed with the Ionic
+      team.</ion-note
+    >
   </ion-list>
 </ion-content>

package/demo/src/app/index/index-page.component.ts

@@ -53,7 +53,7 @@ interface IComponent {
 })
 export class IndexPageComponent {
   readonly components = signal<IComponent[]>([
-    { name: 'accordion', enable: false },
+    { name: 'accordion', enable: true },
     { name: 'action-sheet', enable: true },
     { name: 'alert', enable: true },
     { name: 'breadcrumbs', enable: true },
@@ -63,22 +63,21 @@ export class IndexPageComponent {
     { name: 'chip', enable: true },
     { name: 'date-and-time-pickers', enable: true },
     { name: 'floating-action-button', enable: true },
-    { name: 'inputs', enable: false },
-    { name: 'item-list', enable: false },
-    { name: 'menu', enable: false },
+    { name: 'inputs', enable: true },
+    { name: 'item-list', enable: true },
     { name: 'modal', enable: true },
     { name: 'popover', enable: true },
     { name: 'progress-indicators', enable: true },
     { name: 'radio', enable: true },
     { name: 'range', enable: true },
-    { name: 'reorder', enable: false },
+    { name: 'reorder', enable: true },
     { name: 'searchbar', enable: true },
-    { name: 'segment', enable: true },
+    { name: 'segment', enable: false },
     { name: 'select', enable: true },
-    { name: 'tabs', enable: false },
+    { name: 'tabs', enable: true },
     { name: 'toast', enable: true },
     { name: 'toggle', enable: true },
-    { name: 'toolbar', enable: false },
+    { name: 'toolbar', enable: true },
   ]);
   readonly enableComponents = computed(() => this.components().filter((c) => c.enable));
   readonly disableComponents = computed(() => this.components().filter((c) => !c.enable));
@@ -88,9 +87,6 @@ export class IndexPageComponent {
   readonly #document = inject(DOCUMENT);
 
   async navigateComponent(item: IComponent) {
-    if (!item.enable) {
-      return;
-    }
     await this.#router.navigate([item.name], { relativeTo: this.#route });
   }
 

package/demo/src/app/index/index.routes.ts

@@ -58,10 +58,6 @@ export const routes: Routes = [
     path: 'searchbar',
     loadComponent: () => import('./pages/searchbar/searchbar.page').then((m) => m.SearchbarPage),
   },
-  {
-    path: 'menu',
-    loadComponent: () => import('./pages/menu/menu.page').then((m) => m.MenuPage),
-  },
   {
     path: 'popover',
     loadComponent: () => import('./pages/popover/popover.page').then((m) => m.PopoverPage),
@@ -86,4 +82,28 @@ export const routes: Routes = [
     path: 'date-and-time-pickers',
     loadComponent: () => import('./pages/date-and-time-pickers/date-and-time-pickers.page').then((m) => m.DateAndTimePickersPage),
   },
+  {
+    path: 'accordion',
+    loadComponent: () => import('./pages/accordion/accordion.page').then((m) => m.AccordionPage),
+  },
+  {
+    path: 'inputs',
+    loadComponent: () => import('./pages/inputs/inputs.page').then((m) => m.InputsPage),
+  },
+  {
+    path: 'item-list',
+    loadComponent: () => import('./pages/item-list/item-list.page').then((m) => m.ItemListPage),
+  },
+  {
+    path: 'reorder',
+    loadComponent: () => import('./pages/reorder/reorder.page').then((m) => m.ReorderPage),
+  },
+  {
+    path: 'tabs',
+    loadComponent: () => import('./pages/tabs/tabs.page').then((m) => m.TabsPage),
+  },
+  {
+    path: 'toolbar',
+    loadComponent: () => import('./pages/toolbar/toolbar.page').then((m) => m.ToolbarPage),
+  },
 ];

package/demo/src/app/index/pages/accordion/accordion.page.html

@@ -0,0 +1,45 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>accordion</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" color="light">
+  <ion-list [inset]="true">
+    <ion-item-group class="header-item-group">
+      <ion-item>
+        <ion-label>
+          <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+          <h2>accordion</h2>
+          <ion-header collapse="condense">
+            <ion-toolbar></ion-toolbar>
+          </ion-header>
+          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+  <ion-list [inset]="true">
+    <ion-accordion-group>
+      <ion-accordion value="first">
+        <ion-item slot="header">
+          <ion-label>First Accordion</ion-label>
+        </ion-item>
+        <div class="ion-padding" slot="content">First Content</div>
+      </ion-accordion>
+      <ion-accordion value="second">
+        <ion-item slot="header">
+          <ion-label>Second Accordion</ion-label>
+        </ion-item>
+        <div class="ion-padding" slot="content">Second Content</div>
+      </ion-accordion>
+      <ion-accordion value="third">
+        <ion-item slot="header">
+          <ion-label>Third Accordion</ion-label>
+        </ion-item>
+        <div class="ion-padding" slot="content">Third Content</div>
+      </ion-accordion>
+    </ion-accordion-group>
+  </ion-list>
+</ion-content>

package/demo/src/app/index/pages/accordion/accordion.page.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AccordionPage } from './accordion.page';
+import { testConfig } from '../../../../../util/test.config';
+
+describe('AccordionPage', () => {
+  let component: AccordionPage;
+  let fixture: ComponentFixture<AccordionPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(AccordionPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/index/pages/accordion/accordion.page.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonAccordion,
+  IonAccordionGroup,
+  IonBackButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-accordion',
+  templateUrl: './accordion.page.html',
+  styleUrls: ['./accordion.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonAccordion,
+    IonAccordionGroup,
+  ],
+})
+export class AccordionPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

package/demo/src/app/index/pages/inputs/inputs.page.html

@@ -0,0 +1,65 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>inputs</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" color="light">
+  <ion-list [inset]="true">
+    <ion-item-group class="header-item-group">
+      <ion-item>
+        <ion-label>
+          <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+          <h2>inputs</h2>
+          <ion-header collapse="condense">
+            <ion-toolbar></ion-toolbar>
+          </ion-header>
+          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+  <ion-list [inset]="true">
+    <ion-item-group>
+      <ion-item>
+        <ion-input label="Default label" placeholder="Enter text"></ion-input>
+      </ion-item>
+
+      <ion-item>
+        <ion-input label="Fixed label" labelPlacement="fixed" placeholder="Enter text"></ion-input>
+      </ion-item>
+
+      <ion-item>
+        <ion-input label="Stacked label" labelPlacement="stacked" placeholder="Enter text"></ion-input>
+      </ion-item>
+
+      <ion-item>
+        <ion-input label="Floating label" labelPlacement="floating" placeholder="Enter text"></ion-input>
+      </ion-item>
+
+      <ion-item>
+        <ion-input type="password" label="Password" value="NeverGonnaGiveYouUp">
+          <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+        </ion-input>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-item-group>
+      <ion-item>
+        <ion-textarea label="Default label" placeholder="Enter textarea"></ion-textarea>
+      </ion-item>
+      <ion-item>
+        <ion-textarea label="Fixed label" labelPlacement="fixed" placeholder="Enter textarea"></ion-textarea>
+      </ion-item>
+      <ion-item>
+        <ion-textarea label="Stacked label" labelPlacement="stacked" placeholder="Enter textarea"></ion-textarea>
+      </ion-item>
+      <ion-item>
+        <ion-textarea label="Floating label" labelPlacement="floating" placeholder="Enter textarea"></ion-textarea>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+</ion-content>

package/demo/src/app/index/pages/inputs/inputs.page.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { InputsPage } from './inputs.page';
+import { testConfig } from '../../../../../util/test.config';
+
+describe('InputsPage', () => {
+  let component: InputsPage;
+  let fixture: ComponentFixture<InputsPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(InputsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/index/pages/inputs/inputs.page.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonInputPasswordToggle,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonText,
+  IonTextarea,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-inputs',
+  templateUrl: './inputs.page.html',
+  styleUrls: ['./inputs.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonInput,
+    IonInputPasswordToggle,
+    IonTextarea,
+  ],
+})
+export class InputsPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

package/demo/src/app/index/pages/item-list/item-list.page.html

@@ -0,0 +1,52 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>item-list</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" color="light">
+  <ion-list [inset]="true">
+    <ion-item-group class="header-item-group">
+      <ion-item>
+        <ion-label>
+          <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+          <h2>item-list</h2>
+          <ion-header collapse="condense">
+            <ion-toolbar></ion-toolbar>
+          </ion-header>
+          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+  <ion-list [inset]="true">
+    <ion-list-header><ion-label>Inset List</ion-label></ion-list-header>
+    <ion-item-group>
+      <ion-item>
+        <ion-label>Basic Item</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>
+          Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+    <ion-note>Note additional information.</ion-note>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header><ion-label>Default List</ion-label></ion-list-header>
+    <ion-item-group>
+      <ion-item>
+        <ion-label>Basic Item</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>
+          Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+    <ion-note>Note additional information.</ion-note>
+  </ion-list>
+</ion-content>

package/demo/src/app/index/pages/item-list/item-list.page.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ItemListPage } from './item-list.page';
+import { testConfig } from '../../../../../util/test.config';
+
+describe('ItemListPage', () => {
+  let component: ItemListPage;
+  let fixture: ComponentFixture<ItemListPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(ItemListPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/index/pages/item-list/item-list.page.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonNote,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-item-list',
+  templateUrl: './item-list.page.html',
+  styleUrls: ['./item-list.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonListHeader,
+    IonNote,
+  ],
+})
+export class ItemListPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

package/demo/src/app/index/pages/reorder/reorder.page.html

@@ -0,0 +1,52 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>reorder</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" color="light">
+  <ion-list [inset]="true">
+    <ion-item-group class="header-item-group">
+      <ion-item>
+        <ion-label>
+          <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+          <h2>reorder</h2>
+          <ion-header collapse="condense">
+            <ion-toolbar></ion-toolbar>
+          </ion-header>
+          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-reorder-group [disabled]="false">
+      <ion-item>
+        <ion-label> Item 1 </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label> Item 2 </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label> Item 3 </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label> Item 4 </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label> Item 5 </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+    </ion-reorder-group>
+  </ion-list>
+</ion-content>

package/demo/src/app/index/pages/reorder/reorder.page.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReorderPage } from './reorder.page';
+import { testConfig } from '../../../../../util/test.config';
+
+describe('ReorderPage', () => {
+  let component: ReorderPage;
+  let fixture: ComponentFixture<ReorderPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(ReorderPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/index/pages/reorder/reorder.page.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-reorder',
+  templateUrl: './reorder.page.html',
+  styleUrls: ['./reorder.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonReorder,
+    IonReorderGroup,
+  ],
+})
+export class ReorderPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

package/demo/src/app/index/pages/segment/segment.page.html

@@ -15,7 +15,12 @@
           <ion-header collapse="condense">
             <ion-toolbar></ion-toolbar>
           </ion-header>
-          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+          <!--          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>-->
+
+          <ion-text
+            >This components is excluded this packages. You should use default ios design util release re-design version.
+            <a href="https://github.com/rdlabo-team/ionic-theme-ios26/blob/main/FEEDBACK2.md" target="_blank">Reason is here.</a></ion-text
+          >
         </ion-label>
       </ion-item>
     </ion-item-group>

package/demo/src/app/index/pages/segment/segment.page.scss

@@ -0,0 +1 @@
+@use '../../../../../../src/components/ion-segment';

package/demo/src/app/index/pages/tabs/tabs.page.html

@@ -0,0 +1,78 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>tabs</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" color="light">
+  <ion-list [inset]="true">
+    <ion-item-group class="header-item-group">
+      <ion-item>
+        <ion-label>
+          <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+          <h2>tabs</h2>
+          <ion-header collapse="condense">
+            <ion-toolbar></ion-toolbar>
+          </ion-header>
+          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <ion-tab-bar class="ion-margin-bottom">
+    <ion-tab-button tab="home">
+      <ion-icon name="play-circle"></ion-icon>
+      Listen Now
+    </ion-tab-button>
+    <ion-tab-button tab="radio">
+      <ion-icon name="radio"></ion-icon>
+      Radio
+    </ion-tab-button>
+    <ion-tab-button tab="library">
+      <ion-icon name="library"></ion-icon>
+      Library
+    </ion-tab-button>
+  </ion-tab-bar>
+  <ion-tab-bar class="ion-margin-bottom">
+    <ion-tab-button tab="home">
+      <ion-icon name="play-circle"></ion-icon>
+      Listen Now
+    </ion-tab-button>
+    <ion-tab-button tab="radio">
+      <ion-icon name="radio"></ion-icon>
+      Radio
+    </ion-tab-button>
+    <ion-tab-button tab="library">
+      <ion-icon name="library"></ion-icon>
+      Library
+    </ion-tab-button>
+    <ion-tab-button tab="search">
+      <ion-icon name="search"></ion-icon>
+      Search
+    </ion-tab-button>
+  </ion-tab-bar>
+  <ion-tab-bar class="ion-margin-bottom">
+    <ion-tab-button tab="home">
+      <ion-icon name="play-circle"></ion-icon>
+      Listen Now
+    </ion-tab-button>
+    <ion-tab-button tab="radio">
+      <ion-icon name="radio"></ion-icon>
+      Radio
+    </ion-tab-button>
+    <ion-tab-button tab="library">
+      <ion-icon name="library"></ion-icon>
+      Library
+    </ion-tab-button>
+    <ion-tab-button tab="search">
+      <ion-icon name="search"></ion-icon>
+      Search
+    </ion-tab-button>
+    <ion-tab-button tab="search">
+      <ion-icon name="search"></ion-icon>
+      Last
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-content>

package/demo/src/app/index/pages/tabs/tabs.page.scss

@@ -0,0 +1,6 @@
+:host {
+  ion-tab-bar {
+    margin-left: calc(16px + var(--ion-safe-area-left, 0px));
+    margin-right: calc(16px + var(--ion-safe-area-right, 0px));
+  }
+}

package/demo/src/app/index/pages/tabs/tabs.page.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TabsPage } from './tabs.page';
+import { testConfig } from '../../../../../util/test.config';
+
+describe('TabsPage', () => {
+  let component: TabsPage;
+  let fixture: ComponentFixture<TabsPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(TabsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/index/pages/tabs/tabs.page.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonTabBar,
+  IonTabButton,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-tabs',
+  templateUrl: './tabs.page.html',
+  styleUrls: ['./tabs.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonTabBar,
+    IonTabButton,
+  ],
+})
+export class TabsPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

package/demo/src/app/index/pages/toolbar/toolbar.page.html

@@ -0,0 +1,121 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>toolbar</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" color="light">
+  <ion-list [inset]="true">
+    <ion-item-group class="header-item-group">
+      <ion-item>
+        <ion-label>
+          <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+          <h2>toolbar</h2>
+          <ion-header collapse="condense">
+            <ion-toolbar></ion-toolbar>
+          </ion-header>
+          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button> Start </ion-button>
+    </ion-buttons>
+    <ion-title>Start / End Buttons</ion-title>
+    <ion-buttons slot="end">
+      <ion-button [disabled]="true"> Disable End </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button> Secondary </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button> Primary </ion-button>
+    </ion-buttons>
+    <ion-title>Primary / Secondary Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button>
+        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+      </ion-button>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button>
+        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Icon Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button fill="solid">
+        <ion-icon slot="start" name="person-circle"></ion-icon>
+        Contact
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button fill="solid">
+        Help
+        <ion-icon slot="end" name="help-circle"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Solid Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button fill="outline">
+        <ion-icon slot="start" name="star"></ion-icon>
+        Star
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button fill="outline">
+        Edit
+        <ion-icon slot="end" name="create"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Outline Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button default-href="#"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Back Button</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button auto-hide="false"></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Menu Button</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-searchbar></ion-searchbar>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-segment [value]="'all'">
+      <ion-segment-button [value]="'all'">
+        <ion-label>All</ion-label>
+      </ion-segment-button>
+      <ion-segment-button [value]="'favorites'">
+        <ion-label>Favorites</ion-label>
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</ion-content>

package/demo/src/app/index/pages/toolbar/toolbar.page.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ToolbarPage } from './toolbar.page';
+import { testConfig } from '../../../../../util/test.config';
+
+describe('ToolbarPage', () => {
+  let component: ToolbarPage;
+  let fixture: ComponentFixture<ToolbarPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(ToolbarPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/index/pages/toolbar/toolbar.page.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonMenuButton,
+  IonSearchbar,
+  IonSegment,
+  IonSegmentButton,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-toolbar',
+  templateUrl: './toolbar.page.html',
+  styleUrls: ['./toolbar.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonButtons,
+    IonButton,
+    IonMenuButton,
+    IonSearchbar,
+    IonSegment,
+    IonSegmentButton,
+  ],
+})
+export class ToolbarPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rdlabo/ionic-theme-ios26",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "iOS26 CSS Theme for Ionic Framework",
   "exports": {
     "./src/*": {

package/src/components/ion-action-sheet.scss

@@ -11,6 +11,10 @@ ion-action-sheet.ios:not(.ios26-disabled) {
     margin: 0 8px 8px;
     border-radius: 32px;
 
+    .action-sheet-title,
+    .action-sheet-has-sub-title {
+      background: none;
+    }
     .action-sheet-title {
       padding-top: 8px;
     }

package/src/components/ion-alert.scss

@@ -12,7 +12,6 @@ ion-alert.ios:not(.ios26-disabled) {
     .alert-head,
     .alert-message {
       text-align: left;
-      padding: 12px 20px;
     }
 
     .alert-radio-group {

package/src/components/ion-button.scss

@@ -18,7 +18,10 @@
   ion-button:not(.ios26-disabled),
   ion-back-button:not(.ios26-disabled) {
     transform: none;
-    opacity: 1;
+
+    &:not(.button-disabled) {
+      opacity: 1;
+    }
 
     &.ion-activated {
       --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
@@ -99,7 +102,10 @@
     &::part(native) {
       @include api.glass-background;
     }
-    opacity: 1; // for ion-back-button
+
+    &:not(.button-disabled) {
+      opacity: 1; // for ion-back-button
+    }
 
     --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
     &.ion-color {

package/src/components/ion-list.scss

@@ -3,12 +3,14 @@
 ion-list.list-inset.ios:not(.ios26-disabled) {
   @include theme-list-inset.ion-list-inset();
 
-  ion-radio-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-tabs.scss

@@ -6,13 +6,28 @@ ion-tab-bar.ios:not(.ios26-disabled) {
 
   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;

package/src/default-variables.scss

@@ -1,5 +1,7 @@
 :root {
+  --ios26-floating-safe-area-top: max(10px, var(--ion-safe-area-top, 0px));
   --ios26-floating-safe-area-bottom: max(10px, var(--ion-safe-area-bottom, 0px));
+
   --ios26-content-box-shadow-opacity: 0.8;
 
   --ios26-color-dark-rgb: 0, 0, 0;

package/src/ionic-theme-ios26.scss

@@ -16,7 +16,6 @@
 @use 'components/ion-popover';
 @use 'components/ion-range';
 @use 'components/ion-searchbar';
-@use 'components/ion-segment';
 @use 'components/ion-tabs';
 @use 'components/ion-toast';
 @use 'components/ion-toggle';

package/src/utils/theme-list-inset.scss

@@ -57,6 +57,7 @@
 
   ion-item-group,
   ion-reorder-group,
+  ion-accordion-group,
   ion-radio-group {
     ion-item {
       ion-text[slot='end'] {