@rdlabo/ionic-theme-md3 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,79 @@
+# Ionic Theme Material Design 3
+
+A CSS/JS theme library that applies Material Design 3 design system to Ionic applications.
+
+![](screenshots/md3.png)
+
+DEMO is here: https://ionic-theme-md3.netlify.app/
+
+## Overview
+
+This library provides CSS/JS files that bring the Material Design 3 design system to Ionic applications. It updates the look and feel of Ionic components to match the latest Material Design 3 guidelines.
+
+This project aims to follow the core concepts of Ionic as closely as possible, while placing a strong emphasis on compatibility with `@rdlabo/ionic-theme-ios26`. Just as Ionic provides beautiful styling whether it displays the ios or md theme from a single HTML structure, our goal is to ensure that this theme and `@rdlabo/ionic-theme-ios26` are fully compatible.
+
+### Related Projects
+
+If you need a more comprehensive Material Design 3 implementation, you may also be interested in:
+
+- **[md3-for-ionic](https://github.com/danielkleebinder/md3-for-ionic)** by danielkleebinder
+
+> **Note:** This theme is purpose-built for compatibility with Ionic's design approach and `@rdlabo/ionic-theme-ios26`; it is not intended as a strict, full MD3 recreation.
+
+
+## 💖 Support This Project
+
+Enjoying this library? Your support helps keep it alive and growing!  
+Sponsoring means you directly contribute to new features, improvements, and maintenance.
+
+[Become a Sponsor →](https://github.com/sponsors/rdlabo)
+
+
+## Setup
+
+This is a CSS theme for extending your Ionic project. It does not work on its own, so use it together with the Ionic Framework.
+
+```bash
+npm install @rdlabo/ionic-theme-md3
+```
+
+And import the theme in your project's main CSS file (e.g., `src/styles.scss`).
+
+```css
+@import '@rdlabo/ionic-theme-md3/dist/css/default-variables.css';
+@import '@rdlabo/ionic-theme-md3/dist/css/ionic-theme-md3.css';
+```
+
+## Development & Testing
+
+### Demo Application
+
+The `demo/` directory contains an Angular application for testing and demonstrating the theme. To run the demo:
+
+```bash
+cd demo
+npm install
+npm start
+```
+
+### Visual Regression Testing
+
+We use Playwright for visual regression testing to ensure consistent styling across all components. The test suite automatically captures screenshots of all routes in both light and dark modes.
+
+#### Running Tests
+
+```bash
+cd demo
+
+# Run all E2E tests
+npm run test:e2e
+
+# Run tests in UI mode (interactive)
+npm run test:e2e:ui
+
+# Debug tests
+npm run test:e2e:debug
+
+# Update baseline screenshots (when intentionally changing UI)
+npm run test:e2e:update
+```

package/dist/css/components/ion-action-sheet.css

@@ -0,0 +1 @@
+ion-action-sheet.md:not(.md3-disabled){--max-width: 640px !important}ion-action-sheet.md:not(.md3-disabled) .action-sheet-container{overflow:hidden;border-radius:28px 28px 0 0;box-shadow:var(--token-elevation-1)}ion-action-sheet.md:not(.md3-disabled) .action-sheet-container .action-sheet-title{padding:24px 24px 16px}ion-action-sheet.md:not(.md3-disabled) .action-sheet-container .action-sheet-button{padding:12px 24px}

package/dist/css/components/ion-alert.css

@@ -0,0 +1 @@
+ion-alert.md:not(.md3-disabled){--backdrop-opacity: 0.2;--min-width: 280px;--max-width: 560px;transition:transform 200ms ease}ion-alert.md:not(.md3-disabled) .alert-wrapper{border-radius:24px;box-shadow:var(--token-elevation-3)}ion-alert.md:not(.md3-disabled) .alert-wrapper .alert-head{padding-top:24px;padding-bottom:16px}ion-alert.md:not(.md3-disabled) .alert-wrapper .alert-message{padding-bottom:24px}ion-alert.md:not(.md3-disabled) .alert-wrapper .alert-message:empty{padding-bottom:0}

package/dist/css/components/ion-button.css

@@ -0,0 +1 @@
+ion-buttons.md:not(.md3-disabled) ion-button.md:not(.md3-disabled){--border-radius: 999px}ion-buttons.md:not(.md3-disabled) ion-button.md:not(.md3-disabled)::part(native){height:48px}ion-buttons.md:not(.md3-disabled) ion-button.md:not(.md3-disabled).button-has-icon-only::part(native){width:48px;height:48px}ion-button.md:not(.md3-disabled){--box-shadow: none;--padding-start: 16px;--padding-end: 16px;--border-radius: 999px}ion-button.md:not(.md3-disabled).button-square{--border-radius: 12px}ion-button.md:not(.md3-disabled)::part(native){height:40px}ion-button.md:not(.md3-disabled).button-has-icon-only::part(native){width:40px;height:40px}ion-button.md:not(.md3-disabled).button-has-icon-only{--padding-start: 0;--padding-end: 0}ion-button.md:not(.md3-disabled).button-has-icon-only ion-icon[name=close-outline]{font-size:2rem}ion-button.md:not(.md3-disabled) ion-icon{font-size:24px}ion-button.md:not(.md3-disabled) ion-icon[slot=start]{margin-inline-start:0;margin-inline-end:8px}ion-button.md:not(.md3-disabled) ion-icon[slot=end]{margin-inline-start:8px;margin-inline-end:0}ion-button.md:not(.md3-disabled).button-small{--padding-start: 12px;--padding-end: 12px}ion-button.md:not(.md3-disabled).button-small::part(native){height:32px}ion-button.md:not(.md3-disabled).button-small.button-has-icon-only::part(native){width:32px;height:32px}ion-button.md:not(.md3-disabled).button-small ion-icon{font-size:20px}ion-button.md:not(.md3-disabled).button-small ion-icon[slot=start]{margin-inline-start:0;margin-inline-end:4px}ion-button.md:not(.md3-disabled).button-small ion-icon[slot=end]{margin-inline-start:4px;margin-inline-end:0}ion-button.md:not(.md3-disabled).button-large{--padding-start: 24px;--padding-end: 24px}ion-button.md:not(.md3-disabled).button-large.button-square{--border-radius: 16px}ion-button.md:not(.md3-disabled).button-large::part(native){height:56px}ion-button.md:not(.md3-disabled).button-large.button-has-icon-only::part(native){width:56px;height:56px}ion-button.md:not(.md3-disabled).button-large ion-icon{font-size:24px}ion-button.md:not(.md3-disabled).button-large ion-icon[slot=start]{margin-inline-start:0;margin-inline-end:8px}ion-button.md:not(.md3-disabled).button-large ion-icon[slot=end]{margin-inline-start:8px;margin-inline-end:0}

package/dist/css/components/ion-card.css

@@ -0,0 +1 @@
+ion-card.md:not(.md3-disabled){border-radius:12px;box-shadow:var(--token-elevation-1)}ion-card.md:not(.md3-disabled) ion-list ion-item{--padding-start: 0}

package/dist/css/components/ion-chip.css

@@ -0,0 +1 @@
+ion-chip.md:not(.md3-disabled){padding-inline-start:16px;padding-inline-end:16px;border-radius:8px}ion-chip.md:not(.md3-disabled) ion-icon{font-size:18px}ion-chip.md:not(.md3-disabled) ion-icon:first-child{margin-inline-start:-8px;margin-inline-end:8px}ion-chip.md:not(.md3-disabled) ion-icon:last-child{margin-inline-start:8px;margin-inline-end:-8px}

package/dist/css/components/ion-content.css

@@ -0,0 +1 @@
+

package/dist/css/components/ion-datetime.css

@@ -0,0 +1 @@
+

package/dist/css/components/ion-fab.css

@@ -0,0 +1 @@
+ion-fab.md:not(.md3-disabled) ion-fab-button{width:56px;height:56px;--border-radius: 16px;--transition: border-radius var(--token-expressive-fast-special);--box-shadow: var(--token-elevation-3)}ion-fab.md:not(.md3-disabled) ion-fab-button ion-icon{width:24px;height:24px}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-close-active{--border-radius: 50%}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-in-list{--border-radius: 50%}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-small{width:40px;height:40px;--border-radius: 12px}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-small.fab-button-close-active{--border-radius: 50%}ion-fab.md:not(.md3-disabled):has(.fab-button-small) ion-fab-button{width:40px;height:40px}

package/dist/css/components/ion-list.css

@@ -0,0 +1 @@
+ion-list.md:not(.md3-disabled).list-inset{background:rgba(0,0,0,0)}ion-list.md:not(.md3-disabled).list-inset ion-list-header{display:flex;align-items:center}ion-list.md:not(.md3-disabled).list-inset ion-list-header ion-label{font-size:.9rem;margin:8px 4px 4px;color:var(--ion-color-medium-tint)}ion-list.md:not(.md3-disabled).list-inset ion-list-header ion-button{margin-top:8px}ion-list.md:not(.md3-disabled).list-inset ion-list-header ion-note{font-size:.9rem;margin:8px 16px 4px 0}ion-list.md:not(.md3-disabled).list-inset ion-item-group.header-item-group>ion-item>ion-label{width:100%;text-align:center;padding:32px 16px 16px;transform:translateX(5px)}ion-list.md:not(.md3-disabled).list-inset ion-item-group.header-item-group>ion-item>ion-label ion-header.header-collapse-condense>ion-toolbar{--min-height: 0;visibility:hidden}ion-list.md:not(.md3-disabled).list-inset ion-item-group.header-item-group>ion-item>ion-label ion-icon{font-size:2.8rem;color:#fff;border-radius:20%;padding:6px}ion-list.md:not(.md3-disabled).list-inset ion-item-group.header-item-group>ion-item>ion-label h2{font-size:1.2rem;font-weight:bold;margin-top:8px}ion-list.md:not(.md3-disabled).list-inset ion-item-group.header-item-group>ion-item>ion-label ion-text{font-size:.9rem}ion-list.md:not(.md3-disabled).list-inset ion-item-group ion-item ion-text[slot=end],ion-list.md:not(.md3-disabled).list-inset ion-reorder-group ion-item ion-text[slot=end],ion-list.md:not(.md3-disabled).list-inset ion-accordion-group ion-item ion-text[slot=end],ion-list.md:not(.md3-disabled).list-inset ion-radio-group ion-item ion-text[slot=end]{padding-left:8px}ion-list.md:not(.md3-disabled).list-inset ion-item-group ion-item.item-disabled,ion-list.md:not(.md3-disabled).list-inset ion-reorder-group ion-item.item-disabled,ion-list.md:not(.md3-disabled).list-inset ion-accordion-group ion-item.item-disabled,ion-list.md:not(.md3-disabled).list-inset ion-radio-group ion-item.item-disabled{opacity:1}ion-list.md:not(.md3-disabled).list-inset ion-item-group ion-item.item-disabled>*,ion-list.md:not(.md3-disabled).list-inset ion-reorder-group ion-item.item-disabled>*,ion-list.md:not(.md3-disabled).list-inset ion-accordion-group ion-item.item-disabled>*,ion-list.md:not(.md3-disabled).list-inset ion-radio-group ion-item.item-disabled>*{opacity:.4}ion-list.md:not(.md3-disabled).list-inset ion-item-group ion-item.item-disabled::part(detail-icon),ion-list.md:not(.md3-disabled).list-inset ion-reorder-group ion-item.item-disabled::part(detail-icon),ion-list.md:not(.md3-disabled).list-inset ion-accordion-group ion-item.item-disabled::part(detail-icon),ion-list.md:not(.md3-disabled).list-inset ion-radio-group ion-item.item-disabled::part(detail-icon){opacity:.1}ion-list.md:not(.md3-disabled).list-inset ion-item-group ion-item ion-button[slot=end].ion-align-self-end,ion-list.md:not(.md3-disabled).list-inset ion-reorder-group ion-item ion-button[slot=end].ion-align-self-end,ion-list.md:not(.md3-disabled).list-inset ion-accordion-group ion-item ion-button[slot=end].ion-align-self-end,ion-list.md:not(.md3-disabled).list-inset ion-radio-group ion-item ion-button[slot=end].ion-align-self-end{transform:translateY(-7px)}ion-list.md:not(.md3-disabled).list-inset ion-item-group ion-item ion-button[slot=end] ion-icon[slot=icon-only],ion-list.md:not(.md3-disabled).list-inset ion-reorder-group ion-item ion-button[slot=end] ion-icon[slot=icon-only],ion-list.md:not(.md3-disabled).list-inset ion-accordion-group ion-item ion-button[slot=end] ion-icon[slot=icon-only],ion-list.md:not(.md3-disabled).list-inset ion-radio-group ion-item ion-button[slot=end] ion-icon[slot=icon-only]{font-size:1.2rem !important;transform:translateY(4px)}ion-list.md:not(.md3-disabled).list-inset>ion-note{color:var(--ion-color-medium-tint);font-size:.9rem;display:block;margin:8px calc(20px + var(--ion-safe-area-right)) 8px calc(20px + var(--ion-safe-area-left))}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item{--border-color: var(--ion-color-light, #fff)}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item:not(.item-lines-inset):not(.item-lines-none){--border-radius: 4px;--border-width: 0px 0px 2px 0px;--inner-border-width: 0;--show-inset-highlight: 0;--show-full-highlight: 1}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item>ion-input[labelplacement=floating]{transition:transform 200ms ease}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item>ion-input[labelplacement=floating]:not(.label-floating){transform:translateY(-7px)}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item>ion-input[labelplacement=floating].label-floating{transform:translateY(-4px)}ion-list.md:not(.md3-disabled).list-inset ion-item-group,ion-list.md:not(.md3-disabled).list-inset ion-reorder-group,ion-list.md:not(.md3-disabled).list-inset ion-accordion-group,ion-list.md:not(.md3-disabled).list-inset ion-radio-group{border-radius:16px;overflow:hidden}ion-list-header.md:not(.md3-disabled){padding-left:calc(var(--ion-safe-area-left, 0px) + 4px)}

package/dist/css/components/ion-loading.css

@@ -0,0 +1 @@
+ion-loading.md:not(.md3-disabled) .loading-wrapper{border-radius:24px;box-shadow:var(--token-elevation-3)}

package/dist/css/components/ion-modal.css

@@ -0,0 +1 @@
+ion-modal.md:not(.md3-disabled){--box-shadow: var(--token-elevation-3)}@media only screen and (min-width: 768px)and (min-height: 600px){ion-modal.md:not(.md3-disabled){--border-radius: 24px}}ion-modal.md:not(.md3-disabled) ion-toolbar{padding-top:6px;--min-height: calc(64px - 6px);padding-right:calc(var(--ion-safe-area-right) + 14px);padding-left:calc(var(--ion-safe-area-left) + 14px)}ion-modal.md:not(.md3-disabled)::part(handle){width:80px}ion-modal.md:not(.md3-disabled).modal-sheet{--border-radius: 30px}

package/dist/css/components/ion-picker.css

@@ -0,0 +1 @@
+

package/dist/css/components/ion-popover.css

@@ -0,0 +1 @@
+ion-popover.md:not(.md3-disabled){--box-shadow: var(--token-elevation-3)}ion-popover.md:not(.md3-disabled)::part(content){border-radius:12px}ion-popover.md:not(.md3-disabled) ion-select-popover ion-list{padding:0}

package/dist/css/components/ion-range.css

@@ -0,0 +1 @@
+ion-range.md:not(.md3-disabled){--height: 56px;--bar-height: 16px;--bar-border-radius: 8px;--knob-background: transparent;--knob-box-shadow: none;--knob-border-radius: 8px;--knob-size: 44px;--pin-background: var(--ion-background-color-step-700, #4a4458)}ion-range.md:not(.md3-disabled).range-has-pin{padding-top:2.6rem}ion-range.md:not(.md3-disabled)::part(knob){width:4px;height:var(--knob-size);background:var(--ion-color-primary);transform:translateX(calc(var(--knob-size) / 2 - 2px))}ion-range.md:not(.md3-disabled)::part(knob):before{content:none}ion-range.md:not(.md3-disabled).ion-color::part(knob){background:var(--ion-color-base, var(--ion-color-primary))}ion-range.md:not(.md3-disabled)::part(tick),ion-range.md:not(.md3-disabled)::part(tick-active){--bar-height: 4px}ion-range.md:not(.md3-disabled)::part(bar-active){border-top-right-radius:calc(var(--knob-border-radius)/2);border-bottom-right-radius:calc(var(--knob-border-radius)/2);margin-right:6px}ion-range.md:not(.md3-disabled)[dual-knobs]::part(bar-active){border-radius:calc(var(--knob-border-radius)/2);margin-left:6px}ion-range.md:not(.md3-disabled)::part(pin){padding:16px;min-width:36px;top:10px}ion-range.md:not(.md3-disabled)::part(pin):before{content:none}

package/dist/css/components/ion-searchbar.css

@@ -0,0 +1 @@
+ion-searchbar.md:not(.md3-disabled){--box-shadow: none;--border-radius: 999px;--background: rgba(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.08);--color: rgb(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)));--icon-color: rgb(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)))}

package/dist/css/components/ion-segment.css

@@ -0,0 +1 @@
+

package/dist/css/components/ion-tabs.css

@@ -0,0 +1 @@
+ion-tab-bar.md:not(.md3-disabled){height:60px}ion-tab-bar.md:not(.md3-disabled) ion-tab-button{--ripple-color: transparent;--color-selected: var(--ion-color-contrast, var(--ion-color-primary-shade))}ion-tab-bar.md:not(.md3-disabled) ion-tab-button ion-icon{padding:6px 16px;margin-top:6px;border-radius:16px;width:24px;height:20px}ion-tab-bar.md:not(.md3-disabled) ion-tab-button ion-icon::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(var(--ion-color-contrast-rgb, var(--ion-color-primary-rgb, 2, 137, 255)), 0.2);transform:scaleX(0);transition:transform var(--token-expressive-fast-effects);z-index:-1}ion-tab-bar.md:not(.md3-disabled) ion-tab-button ion-label{margin-top:2px;margin-bottom:6px}ion-tab-bar.md:not(.md3-disabled) ion-tab-button.tab-selected ion-icon::before{transform:scaleX(1)}

package/dist/css/components/ion-toast.css

@@ -0,0 +1 @@
+ion-toast.md:not(.md3-disabled){--box-shadow: var(--token-elevation-3);--border-radius: 8px}

package/dist/css/components/ion-toggle.css

@@ -0,0 +1 @@
+ion-toggle.md:not(.md3-disabled){--handle-width: 24px;--handle-height: 24px;--handle-border-radius: 16px;--border-radius: 16px;--handle-box-shadow: none;--handle-spacing: 2px;--handle-transition: transform var(--token-expressive-default-special), background-color var(--token-expressive-default-effects)}ion-toggle.md:not(.md3-disabled)::part(track){box-sizing:border-box;min-height:32px;min-width:52px;border:2px solid var(--ion-text-color-step-450, #79747e);background:var(--ion-background-color-step-100, #e6e0e9)}ion-toggle.md:not(.md3-disabled).toggle-checked::part(track){border-color:var(--ion-color-base);background:var(--ion-color-base)}ion-toggle.md:not(.md3-disabled)::part(handle){background:var(--ion-text-color-step-450, #79747e)}ion-toggle.md:not(.md3-disabled).toggle-checked::part(handle){background:var(--ion-color-contrast)}ion-toggle.md:not(.md3-disabled):not(.ion-color).toggle-checked::part(track){border-color:var(--ion-color-primary);background:var(--ion-color-primary)}ion-toggle.md:not(.md3-disabled):not(.ion-color).toggle-checked::part(handle){background:var(--ion-color-primary-contrast)}

package/dist/css/components/ion-toolbar.css

@@ -0,0 +1 @@
+ion-header.md:not(.md3-disabled),ion-footer.md:not(.md3-disabled){box-shadow:none}

package/dist/css/default-variables.css

@@ -0,0 +1 @@
+:root{--token-elevation-0: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;--token-elevation-1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;--token-elevation-3: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;--token-elevation-6: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;--token-elevation-8: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;--token-elevation-12: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px;--token-expressive-fast-special: 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9);--token-expressive-default-special: 500ms cubic-bezier(0.38, 1.21, 0.22, 1);--token-expressive-slow-special: 650ms cubic-bezier(0.39, 1.29, 0.35, 0.98);--token-expressive-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1);--token-expressive-default-effects: 200ms cubic-bezier(0.34, 0.8, 0.34, 1);--token-expressive-slow-effects: 300ms cubic-bezier(0.34, 0.88, 0.34, 1)}

package/dist/css/ionic-theme-md3.css

@@ -0,0 +1 @@
+ion-action-sheet.md:not(.md3-disabled){--max-width: 640px !important}ion-action-sheet.md:not(.md3-disabled) .action-sheet-container{overflow:hidden;border-radius:28px 28px 0 0;box-shadow:var(--token-elevation-1)}ion-action-sheet.md:not(.md3-disabled) .action-sheet-container .action-sheet-title{padding:24px 24px 16px}ion-action-sheet.md:not(.md3-disabled) .action-sheet-container .action-sheet-button{padding:12px 24px}ion-alert.md:not(.md3-disabled){--backdrop-opacity: 0.2;--min-width: 280px;--max-width: 560px;transition:transform 200ms ease}ion-alert.md:not(.md3-disabled) .alert-wrapper{border-radius:24px;box-shadow:var(--token-elevation-3)}ion-alert.md:not(.md3-disabled) .alert-wrapper .alert-head{padding-top:24px;padding-bottom:16px}ion-alert.md:not(.md3-disabled) .alert-wrapper .alert-message{padding-bottom:24px}ion-alert.md:not(.md3-disabled) .alert-wrapper .alert-message:empty{padding-bottom:0}ion-buttons.md:not(.md3-disabled) ion-button.md:not(.md3-disabled){--border-radius: 999px}ion-buttons.md:not(.md3-disabled) ion-button.md:not(.md3-disabled)::part(native){height:48px}ion-buttons.md:not(.md3-disabled) ion-button.md:not(.md3-disabled).button-has-icon-only::part(native){width:48px;height:48px}ion-button.md:not(.md3-disabled){--box-shadow: none;--padding-start: 16px;--padding-end: 16px;--border-radius: 999px}ion-button.md:not(.md3-disabled).button-square{--border-radius: 12px}ion-button.md:not(.md3-disabled)::part(native){height:40px}ion-button.md:not(.md3-disabled).button-has-icon-only::part(native){width:40px;height:40px}ion-button.md:not(.md3-disabled).button-has-icon-only{--padding-start: 0;--padding-end: 0}ion-button.md:not(.md3-disabled).button-has-icon-only ion-icon[name=close-outline]{font-size:2rem}ion-button.md:not(.md3-disabled) ion-icon{font-size:24px}ion-button.md:not(.md3-disabled) ion-icon[slot=start]{margin-inline-start:0;margin-inline-end:8px}ion-button.md:not(.md3-disabled) ion-icon[slot=end]{margin-inline-start:8px;margin-inline-end:0}ion-button.md:not(.md3-disabled).button-small{--padding-start: 12px;--padding-end: 12px}ion-button.md:not(.md3-disabled).button-small::part(native){height:32px}ion-button.md:not(.md3-disabled).button-small.button-has-icon-only::part(native){width:32px;height:32px}ion-button.md:not(.md3-disabled).button-small ion-icon{font-size:20px}ion-button.md:not(.md3-disabled).button-small ion-icon[slot=start]{margin-inline-start:0;margin-inline-end:4px}ion-button.md:not(.md3-disabled).button-small ion-icon[slot=end]{margin-inline-start:4px;margin-inline-end:0}ion-button.md:not(.md3-disabled).button-large{--padding-start: 24px;--padding-end: 24px}ion-button.md:not(.md3-disabled).button-large.button-square{--border-radius: 16px}ion-button.md:not(.md3-disabled).button-large::part(native){height:56px}ion-button.md:not(.md3-disabled).button-large.button-has-icon-only::part(native){width:56px;height:56px}ion-button.md:not(.md3-disabled).button-large ion-icon{font-size:24px}ion-button.md:not(.md3-disabled).button-large ion-icon[slot=start]{margin-inline-start:0;margin-inline-end:8px}ion-button.md:not(.md3-disabled).button-large ion-icon[slot=end]{margin-inline-start:8px;margin-inline-end:0}ion-card.md:not(.md3-disabled){border-radius:12px;box-shadow:var(--token-elevation-1)}ion-card.md:not(.md3-disabled) ion-list ion-item{--padding-start: 0}ion-chip.md:not(.md3-disabled){padding-inline-start:16px;padding-inline-end:16px;border-radius:8px}ion-chip.md:not(.md3-disabled) ion-icon{font-size:18px}ion-chip.md:not(.md3-disabled) ion-icon:first-child{margin-inline-start:-8px;margin-inline-end:8px}ion-chip.md:not(.md3-disabled) ion-icon:last-child{margin-inline-start:8px;margin-inline-end:-8px}ion-fab.md:not(.md3-disabled) ion-fab-button{width:56px;height:56px;--border-radius: 16px;--transition: border-radius var(--token-expressive-fast-special);--box-shadow: var(--token-elevation-3)}ion-fab.md:not(.md3-disabled) ion-fab-button ion-icon{width:24px;height:24px}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-close-active{--border-radius: 50%}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-in-list{--border-radius: 50%}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-small{width:40px;height:40px;--border-radius: 12px}ion-fab.md:not(.md3-disabled) ion-fab-button.fab-button-small.fab-button-close-active{--border-radius: 50%}ion-fab.md:not(.md3-disabled):has(.fab-button-small) ion-fab-button{width:40px;height:40px}ion-list.md:not(.md3-disabled).list-inset{background:rgba(0,0,0,0)}ion-list.md:not(.md3-disabled).list-inset ion-list-header{display:flex;align-items:center}ion-list.md:not(.md3-disabled).list-inset ion-list-header ion-label{font-size:.9rem;margin:8px 4px 4px;color:var(--ion-color-medium-tint)}ion-list.md:not(.md3-disabled).list-inset ion-list-header ion-button{margin-top:8px}ion-list.md:not(.md3-disabled).list-inset ion-list-header ion-note{font-size:.9rem;margin:8px 16px 4px 0}ion-list.md:not(.md3-disabled).list-inset ion-item-group.header-item-group>ion-item>ion-label{width:100%;text-align:center;padding:32px 16px 16px;transform:translateX(5px)}ion-list.md:not(.md3-disabled).list-inset ion-item-group.header-item-group>ion-item>ion-label ion-header.header-collapse-condense>ion-toolbar{--min-height: 0;visibility:hidden}ion-list.md:not(.md3-disabled).list-inset ion-item-group.header-item-group>ion-item>ion-label ion-icon{font-size:2.8rem;color:#fff;border-radius:20%;padding:6px}ion-list.md:not(.md3-disabled).list-inset ion-item-group.header-item-group>ion-item>ion-label h2{font-size:1.2rem;font-weight:bold;margin-top:8px}ion-list.md:not(.md3-disabled).list-inset ion-item-group.header-item-group>ion-item>ion-label ion-text{font-size:.9rem}ion-list.md:not(.md3-disabled).list-inset ion-item-group ion-item ion-text[slot=end],ion-list.md:not(.md3-disabled).list-inset ion-reorder-group ion-item ion-text[slot=end],ion-list.md:not(.md3-disabled).list-inset ion-accordion-group ion-item ion-text[slot=end],ion-list.md:not(.md3-disabled).list-inset ion-radio-group ion-item ion-text[slot=end]{padding-left:8px}ion-list.md:not(.md3-disabled).list-inset ion-item-group ion-item.item-disabled,ion-list.md:not(.md3-disabled).list-inset ion-reorder-group ion-item.item-disabled,ion-list.md:not(.md3-disabled).list-inset ion-accordion-group ion-item.item-disabled,ion-list.md:not(.md3-disabled).list-inset ion-radio-group ion-item.item-disabled{opacity:1}ion-list.md:not(.md3-disabled).list-inset ion-item-group ion-item.item-disabled>*,ion-list.md:not(.md3-disabled).list-inset ion-reorder-group ion-item.item-disabled>*,ion-list.md:not(.md3-disabled).list-inset ion-accordion-group ion-item.item-disabled>*,ion-list.md:not(.md3-disabled).list-inset ion-radio-group ion-item.item-disabled>*{opacity:.4}ion-list.md:not(.md3-disabled).list-inset ion-item-group ion-item.item-disabled::part(detail-icon),ion-list.md:not(.md3-disabled).list-inset ion-reorder-group ion-item.item-disabled::part(detail-icon),ion-list.md:not(.md3-disabled).list-inset ion-accordion-group ion-item.item-disabled::part(detail-icon),ion-list.md:not(.md3-disabled).list-inset ion-radio-group ion-item.item-disabled::part(detail-icon){opacity:.1}ion-list.md:not(.md3-disabled).list-inset ion-item-group ion-item ion-button[slot=end].ion-align-self-end,ion-list.md:not(.md3-disabled).list-inset ion-reorder-group ion-item ion-button[slot=end].ion-align-self-end,ion-list.md:not(.md3-disabled).list-inset ion-accordion-group ion-item ion-button[slot=end].ion-align-self-end,ion-list.md:not(.md3-disabled).list-inset ion-radio-group ion-item ion-button[slot=end].ion-align-self-end{transform:translateY(-7px)}ion-list.md:not(.md3-disabled).list-inset ion-item-group ion-item ion-button[slot=end] ion-icon[slot=icon-only],ion-list.md:not(.md3-disabled).list-inset ion-reorder-group ion-item ion-button[slot=end] ion-icon[slot=icon-only],ion-list.md:not(.md3-disabled).list-inset ion-accordion-group ion-item ion-button[slot=end] ion-icon[slot=icon-only],ion-list.md:not(.md3-disabled).list-inset ion-radio-group ion-item ion-button[slot=end] ion-icon[slot=icon-only]{font-size:1.2rem !important;transform:translateY(4px)}ion-list.md:not(.md3-disabled).list-inset>ion-note{color:var(--ion-color-medium-tint);font-size:.9rem;display:block;margin:8px calc(20px + var(--ion-safe-area-right)) 8px calc(20px + var(--ion-safe-area-left))}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item{--border-color: var(--ion-color-light, #fff)}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item:not(.item-lines-inset):not(.item-lines-none){--border-radius: 4px;--border-width: 0px 0px 2px 0px;--inner-border-width: 0;--show-inset-highlight: 0;--show-full-highlight: 1}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item>ion-input[labelplacement=floating]{transition:transform 200ms ease}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item>ion-input[labelplacement=floating]:not(.label-floating){transform:translateY(-7px)}ion-list.md:not(.md3-disabled).list-inset ion-item-group>ion-item>ion-input[labelplacement=floating].label-floating{transform:translateY(-4px)}ion-list.md:not(.md3-disabled).list-inset ion-item-group,ion-list.md:not(.md3-disabled).list-inset ion-reorder-group,ion-list.md:not(.md3-disabled).list-inset ion-accordion-group,ion-list.md:not(.md3-disabled).list-inset ion-radio-group{border-radius:16px;overflow:hidden}ion-list-header.md:not(.md3-disabled){padding-left:calc(var(--ion-safe-area-left, 0px) + 4px)}ion-loading.md:not(.md3-disabled) .loading-wrapper{border-radius:24px;box-shadow:var(--token-elevation-3)}ion-modal.md:not(.md3-disabled){--box-shadow: var(--token-elevation-3)}@media only screen and (min-width: 768px)and (min-height: 600px){ion-modal.md:not(.md3-disabled){--border-radius: 24px}}ion-modal.md:not(.md3-disabled) ion-toolbar{padding-top:6px;--min-height: calc(64px - 6px);padding-right:calc(var(--ion-safe-area-right) + 14px);padding-left:calc(var(--ion-safe-area-left) + 14px)}ion-modal.md:not(.md3-disabled)::part(handle){width:80px}ion-modal.md:not(.md3-disabled).modal-sheet{--border-radius: 30px}ion-popover.md:not(.md3-disabled){--box-shadow: var(--token-elevation-3)}ion-popover.md:not(.md3-disabled)::part(content){border-radius:12px}ion-popover.md:not(.md3-disabled) ion-select-popover ion-list{padding:0}ion-range.md:not(.md3-disabled){--height: 56px;--bar-height: 16px;--bar-border-radius: 8px;--knob-background: transparent;--knob-box-shadow: none;--knob-border-radius: 8px;--knob-size: 44px;--pin-background: var(--ion-background-color-step-700, #4a4458)}ion-range.md:not(.md3-disabled).range-has-pin{padding-top:2.6rem}ion-range.md:not(.md3-disabled)::part(knob){width:4px;height:var(--knob-size);background:var(--ion-color-primary);transform:translateX(calc(var(--knob-size) / 2 - 2px))}ion-range.md:not(.md3-disabled)::part(knob):before{content:none}ion-range.md:not(.md3-disabled).ion-color::part(knob){background:var(--ion-color-base, var(--ion-color-primary))}ion-range.md:not(.md3-disabled)::part(tick),ion-range.md:not(.md3-disabled)::part(tick-active){--bar-height: 4px}ion-range.md:not(.md3-disabled)::part(bar-active){border-top-right-radius:calc(var(--knob-border-radius)/2);border-bottom-right-radius:calc(var(--knob-border-radius)/2);margin-right:6px}ion-range.md:not(.md3-disabled)[dual-knobs]::part(bar-active){border-radius:calc(var(--knob-border-radius)/2);margin-left:6px}ion-range.md:not(.md3-disabled)::part(pin){padding:16px;min-width:36px;top:10px}ion-range.md:not(.md3-disabled)::part(pin):before{content:none}ion-searchbar.md:not(.md3-disabled){--box-shadow: none;--border-radius: 999px;--background: rgba(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.08);--color: rgb(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)));--icon-color: rgb(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)))}ion-tab-bar.md:not(.md3-disabled){height:60px}ion-tab-bar.md:not(.md3-disabled) ion-tab-button{--ripple-color: transparent;--color-selected: var(--ion-color-contrast, var(--ion-color-primary-shade))}ion-tab-bar.md:not(.md3-disabled) ion-tab-button ion-icon{padding:6px 16px;margin-top:6px;border-radius:16px;width:24px;height:20px}ion-tab-bar.md:not(.md3-disabled) ion-tab-button ion-icon::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(var(--ion-color-contrast-rgb, var(--ion-color-primary-rgb, 2, 137, 255)), 0.2);transform:scaleX(0);transition:transform var(--token-expressive-fast-effects);z-index:-1}ion-tab-bar.md:not(.md3-disabled) ion-tab-button ion-label{margin-top:2px;margin-bottom:6px}ion-tab-bar.md:not(.md3-disabled) ion-tab-button.tab-selected ion-icon::before{transform:scaleX(1)}ion-toast.md:not(.md3-disabled){--box-shadow: var(--token-elevation-3);--border-radius: 8px}ion-toggle.md:not(.md3-disabled){--handle-width: 24px;--handle-height: 24px;--handle-border-radius: 16px;--border-radius: 16px;--handle-box-shadow: none;--handle-spacing: 2px;--handle-transition: transform var(--token-expressive-default-special), background-color var(--token-expressive-default-effects)}ion-toggle.md:not(.md3-disabled)::part(track){box-sizing:border-box;min-height:32px;min-width:52px;border:2px solid var(--ion-text-color-step-450, #79747e);background:var(--ion-background-color-step-100, #e6e0e9)}ion-toggle.md:not(.md3-disabled).toggle-checked::part(track){border-color:var(--ion-color-base);background:var(--ion-color-base)}ion-toggle.md:not(.md3-disabled)::part(handle){background:var(--ion-text-color-step-450, #79747e)}ion-toggle.md:not(.md3-disabled).toggle-checked::part(handle){background:var(--ion-color-contrast)}ion-toggle.md:not(.md3-disabled):not(.ion-color).toggle-checked::part(track){border-color:var(--ion-color-primary);background:var(--ion-color-primary)}ion-toggle.md:not(.md3-disabled):not(.ion-color).toggle-checked::part(handle){background:var(--ion-color-primary-contrast)}ion-header.md:not(.md3-disabled),ion-footer.md:not(.md3-disabled){box-shadow:none}

package/dist/css/md-remove-ios-class-effect.css

@@ -0,0 +1 @@
+ion-toolbar.md:not(.ios26-disabled)>ion-back-button[slot=start]{margin-inline-start:4px}ion-toolbar.md:not(.ios26-disabled)>ion-back-button[slot=end]{margin-inline-end:4px}ion-buttons.md ion-button.md:not(.ios26-disabled).button-default{--color: initial;--background: transparent;--background-activated: transparent;--background-focused: transparent;--background-hover: transparent}ion-buttons.md ion-button.md:not(.ios26-disabled).button-default.button-has-icon-only{--padding-top: 12px;--padding-end: 12px;--padding-bottom: 12px;--padding-start: 12px;--border-radius: 50%;margin:0;width:3rem;height:3rem}

package/dist/css/utils/theme-list-inset.css

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@rdlabo/ionic-theme-md3",
+  "version": "0.0.0",
+  "description": "Material Design 3 Theme for Ionic Framework",
+  "files": [
+    "dist",
+    "src",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "rm -rf dist/css && sass src/styles:dist/css --style=compressed --no-source-map",
+    "build:demo": "npm run build && cd demo && npm install && npm run build -- --configuration=production",
+    "prepare": "husky install",
+    "lint": "prettier --check \"./**/*.{scss,ts}\" &&  prettier --parser angular --check \"./**/*.html\"",
+    "fmt": "prettier --write \"./**/*.{scss,ts}\" &&  prettier --parser angular --write \"./**/*.html\"",
+    "release": "np --no-tests",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/rdlabo-team/ionic-theme-md3.git"
+  },
+  "keywords": [
+    "ionic",
+    "framework",
+    "theme",
+    "css",
+    "md3"
+  ],
+  "author": "Masahiko Sakakibara <sakakibara@rdlabo.jp>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rdlabo-team/ionic-theme-md3/issues"
+  },
+  "homepage": "https://github.com/rdlabo-team/ionic-theme-md3#readme",
+  "devDependencies": {
+    "@ionic/angular": "^8.7.6",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.1",
+    "np": "^10.2.0",
+    "prettier": "^3.6.2",
+    "sass": "^1.93.2",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "@ionic/core": "> 8.0.0"
+  }
+}

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

@@ -0,0 +1,17 @@
+ion-action-sheet.md:not(.md3-disabled) {
+  --max-width: 640px !important;
+
+  .action-sheet-container {
+    overflow: hidden;
+    border-radius: 28px 28px 0 0;
+    box-shadow: var(--token-elevation-1);
+
+    .action-sheet-title {
+      padding: 24px 24px 16px;
+    }
+
+    .action-sheet-button {
+      padding: 12px 24px;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+ion-alert.md:not(.md3-disabled) {
+  --backdrop-opacity: 0.2;
+  --min-width: 280px;
+  --max-width: 560px;
+  transition: transform 200ms ease;
+
+  .alert-wrapper {
+    border-radius: 24px;
+    box-shadow: var(--token-elevation-3);
+
+    .alert-head {
+      padding-top: 24px;
+      padding-bottom: 16px;
+    }
+
+    .alert-message {
+      padding-bottom: 24px;
+      &:empty {
+        padding-bottom: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,117 @@
+@mixin theme-buttons {
+  ion-button.md:not(.md3-disabled) {
+    --border-radius: 999px;
+
+    &::part(native) {
+      height: 48px;
+    }
+    &.button-has-icon-only {
+      &::part(native) {
+        width: 48px;
+        height: 48px;
+      }
+    }
+  }
+}
+
+@mixin theme-button() {
+  // Default is be round button
+  --box-shadow: none;
+  --padding-start: 16px;
+  --padding-end: 16px;
+  --border-radius: 999px;
+
+  &.button-square {
+    --border-radius: 12px;
+  }
+
+  &::part(native) {
+    height: 40px;
+  }
+  &.button-has-icon-only {
+    &::part(native) {
+      width: 40px;
+      height: 40px;
+    }
+    --padding-start: 0;
+    --padding-end: 0;
+
+    ion-icon {
+      &[name='close-outline'] {
+        font-size: 2rem;
+      }
+    }
+  }
+  ion-icon {
+    font-size: 24px;
+    &[slot='start'] {
+      margin-inline-start: 0;
+      margin-inline-end: 8px;
+    }
+    &[slot='end'] {
+      margin-inline-start: 8px;
+      margin-inline-end: 0;
+    }
+  }
+
+  &.button-small {
+    --padding-start: 12px;
+    --padding-end: 12px;
+    &::part(native) {
+      height: 32px;
+    }
+    &.button-has-icon-only::part(native) {
+      width: 32px;
+      height: 32px;
+    }
+    ion-icon {
+      font-size: 20px;
+      &[slot='start'] {
+        margin-inline-start: 0;
+        margin-inline-end: 4px;
+      }
+      &[slot='end'] {
+        margin-inline-start: 4px;
+        margin-inline-end: 0;
+      }
+    }
+  }
+
+  &.button-large {
+    --padding-start: 24px;
+    --padding-end: 24px;
+
+    &.button-square {
+      --border-radius: 16px;
+    }
+
+    &::part(native) {
+      height: 56px;
+    }
+    &.button-has-icon-only::part(native) {
+      width: 56px;
+      height: 56px;
+    }
+    ion-icon {
+      font-size: 24px;
+      &[slot='start'] {
+        margin-inline-start: 0;
+        margin-inline-end: 8px;
+      }
+      &[slot='end'] {
+        margin-inline-start: 8px;
+        margin-inline-end: 0;
+      }
+    }
+  }
+}
+
+ion-buttons.md:not(.md3-disabled) {
+  @include theme-buttons;
+}
+ion-button.md:not(.md3-disabled) {
+  @include theme-button;
+}
+ion-back-button.md:not(.md3-disabled) {
+  //@include theme-button;
+}

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

@@ -0,0 +1,8 @@
+ion-card.md:not(.md3-disabled) {
+  border-radius: 12px;
+  box-shadow: var(--token-elevation-1);
+
+  ion-list ion-item {
+    --padding-start: 0;
+  }
+}

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

@@ -0,0 +1,19 @@
+ion-chip.md:not(.md3-disabled) {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+  border-radius: 8px;
+
+  ion-icon {
+    font-size: 18px;
+
+    &:first-child {
+      margin-inline-start: -8px;
+      margin-inline-end: 8px;
+    }
+
+    &:last-child {
+      margin-inline-start: 8px;
+      margin-inline-end: -8px;
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+.md:not(.md3-disabled) {
+}

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

@@ -0,0 +1,2 @@
+ion-datetime.md:not(.md3-disabled) {
+}

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

@@ -0,0 +1,38 @@
+ion-fab.md:not(.md3-disabled) {
+  ion-fab-button {
+    width: 56px;
+    height: 56px;
+    --border-radius: 16px;
+    --transition: border-radius var(--token-expressive-fast-special);
+    --box-shadow: var(--token-elevation-3);
+
+    ion-icon {
+      width: 24px;
+      height: 24px;
+    }
+
+    &.fab-button-close-active {
+      --border-radius: 50%;
+    }
+
+    &.fab-button-in-list {
+      --border-radius: 50%;
+    }
+
+    &.fab-button-small {
+      width: 40px;
+      height: 40px;
+      --border-radius: 12px;
+      &.fab-button-close-active {
+        --border-radius: 50%;
+      }
+    }
+  }
+
+  &:has(.fab-button-small) {
+    ion-fab-button {
+      width: 40px;
+      height: 40px;
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+@use '../utils/theme-list-inset';
+
+ion-list.md:not(.md3-disabled).list-inset {
+  @include theme-list-inset.ion-list-inset();
+
+  ion-item-group > ion-item {
+    --border-color: var(--ion-color-light, #fff);
+
+    &:not(.item-lines-inset):not(.item-lines-none) {
+      --border-radius: 4px;
+      --border-width: #{0px 0px 2px 0px};
+      --inner-border-width: 0;
+      --show-inset-highlight: 0;
+      --show-full-highlight: 1;
+    }
+
+    & > ion-input[labelplacement='floating'] {
+      transition: transform 200ms ease;
+
+      &:not(.label-floating) {
+        transform: translateY(-7px);
+      }
+
+      &.label-floating {
+        transform: translateY(-4px);
+      }
+    }
+  }
+}
+
+ion-list.md:not(.md3-disabled).list-inset {
+  ion-item-group,
+  ion-reorder-group,
+  ion-accordion-group,
+  ion-radio-group {
+    border-radius: 16px;
+    overflow: hidden;
+  }
+}
+
+ion-list-header.md:not(.md3-disabled) {
+  padding-left: calc(var(--ion-safe-area-left, 0px) + 4px);
+}

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

@@ -0,0 +1,6 @@
+ion-loading.md:not(.md3-disabled) {
+  .loading-wrapper {
+    border-radius: 24px;
+    box-shadow: var(--token-elevation-3);
+  }
+}

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

@@ -0,0 +1,19 @@
+ion-modal.md:not(.md3-disabled) {
+  --box-shadow: var(--token-elevation-3);
+  @media only screen and (min-width: 768px) and (min-height: 600px) {
+    --border-radius: 24px;
+  }
+  ion-toolbar {
+    padding-top: 6px;
+    --min-height: calc(64px - 6px);
+    padding-right: calc(var(--ion-safe-area-right) + 14px);
+    padding-left: calc(var(--ion-safe-area-left) + 14px);
+  }
+  &::part(handle) {
+    width: 80px;
+  }
+
+  &.modal-sheet {
+    --border-radius: 30px;
+  }
+}

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

@@ -0,0 +1,2 @@
+ion-picker.md:not(.md3-disabled) {
+}

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

@@ -0,0 +1,12 @@
+ion-popover.md:not(.md3-disabled) {
+  --box-shadow: var(--token-elevation-3);
+  &::part(content) {
+    border-radius: 12px;
+  }
+
+  ion-select-popover {
+    ion-list {
+      padding: 0;
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+ion-range.md:not(.md3-disabled) {
+  --height: 56px;
+  --bar-height: 16px;
+  --bar-border-radius: 8px;
+
+  --knob-background: transparent;
+  --knob-box-shadow: none;
+  --knob-border-radius: 8px;
+  --knob-size: 44px;
+
+  --pin-background: var(--ion-background-color-step-700, #4a4458);
+
+  &.range-has-pin {
+    padding-top: 2.6rem;
+  }
+
+  &::part(knob) {
+    width: 4px;
+    height: var(--knob-size);
+    background: var(--ion-color-primary);
+    transform: translateX(calc(var(--knob-size) / 2 - 2px));
+    &:before {
+      content: none;
+    }
+  }
+  &.ion-color::part(knob) {
+    background: var(--ion-color-base, var(--ion-color-primary));
+  }
+
+  &::part(tick),
+  &::part(tick-active) {
+    --bar-height: 4px;
+  }
+
+  &::part(bar-active) {
+    border-top-right-radius: calc(var(--knob-border-radius) / 2);
+    border-bottom-right-radius: calc(var(--knob-border-radius) / 2);
+    margin-right: 6px;
+  }
+
+  &[dual-knobs]::part(bar-active) {
+    border-radius: calc(var(--knob-border-radius) / 2);
+    margin-left: 6px;
+  }
+
+  &::part(pin) {
+    padding: 16px;
+    min-width: 36px;
+    top: 10px;
+    &:before {
+      content: none;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+ion-searchbar.md:not(.md3-disabled) {
+  --box-shadow: none;
+  --border-radius: 999px;
+  --background: rgba(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.08);
+  --color: rgb(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)));
+  --icon-color: rgb(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)));
+}

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

@@ -0,0 +1,2 @@
+ion-segment.md:not(.md3-disabled) {
+}

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

@@ -0,0 +1,35 @@
+ion-tab-bar.md:not(.md3-disabled) {
+  height: 60px;
+  ion-tab-button {
+    --ripple-color: transparent;
+    --color-selected: var(--ion-color-contrast, var(--ion-color-primary-shade));
+    ion-icon {
+      padding: 6px 16px;
+      margin-top: 6px;
+      border-radius: 16px;
+      width: calc(56px - 32px);
+      height: calc(32px - 12px);
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(var(--ion-color-contrast-rgb, var(--ion-color-primary-rgb, 2, 137, 255)), 0.2);
+        transform: scaleX(0);
+        transition: transform var(--token-expressive-fast-effects);
+        z-index: -1;
+      }
+    }
+    ion-label {
+      margin-top: 2px;
+      margin-bottom: 6px;
+    }
+    &.tab-selected {
+      ion-icon::before {
+        transform: scaleX(1);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+ion-toast.md:not(.md3-disabled) {
+  --box-shadow: var(--token-elevation-3);
+  --border-radius: 8px;
+}

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

@@ -0,0 +1,40 @@
+ion-toggle.md:not(.md3-disabled) {
+  --handle-width: 24px;
+  --handle-height: 24px;
+  --handle-border-radius: 16px;
+  --border-radius: 16px;
+  --handle-box-shadow: none;
+  --handle-spacing: 2px;
+  --handle-transition: transform var(--token-expressive-default-special), background-color var(--token-expressive-default-effects);
+
+  &::part(track) {
+    box-sizing: border-box;
+    min-height: 32px;
+    min-width: 52px;
+    border: 2px solid var(--ion-text-color-step-450, #79747e);
+    background: var(--ion-background-color-step-100, #e6e0e9);
+  }
+
+  &.toggle-checked::part(track) {
+    border-color: var(--ion-color-base);
+    background: var(--ion-color-base);
+  }
+
+  &::part(handle) {
+    background: var(--ion-text-color-step-450, #79747e);
+  }
+
+  &.toggle-checked::part(handle) {
+    background: var(--ion-color-contrast);
+  }
+
+  &:not(.ion-color) {
+    &.toggle-checked::part(track) {
+      border-color: var(--ion-color-primary);
+      background: var(--ion-color-primary);
+    }
+    &.toggle-checked::part(handle) {
+      background: var(--ion-color-primary-contrast);
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+ion-header.md:not(.md3-disabled),
+ion-footer.md:not(.md3-disabled) {
+  box-shadow: none;
+}

package/src/styles/default-variables.scss

@@ -0,0 +1,25 @@
+/**
+ * @naming
+ * prefix:                 ios26
+ * target-element:         tab-button
+ * target css property:    color
+ * status:                 selected
+ * additional information: rgb
+ */
+
+:root {
+  --token-elevation-0: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;
+  --token-elevation-1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
+  --token-elevation-3: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
+  --token-elevation-6: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
+  --token-elevation-8: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
+  --token-elevation-12: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px;
+
+  --token-expressive-fast-special: 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9);
+  --token-expressive-default-special: 500ms cubic-bezier(0.38, 1.21, 0.22, 1);
+  --token-expressive-slow-special: 650ms cubic-bezier(0.39, 1.29, 0.35, 0.98);
+
+  --token-expressive-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1);
+  --token-expressive-default-effects: 200ms cubic-bezier(0.34, 0.8, 0.34, 1);
+  --token-expressive-slow-effects: 300ms cubic-bezier(0.34, 0.88, 0.34, 1);
+}

package/src/styles/ionic-theme-md3.scss

@@ -0,0 +1,20 @@
+@use 'components/ion-action-sheet';
+@use 'components/ion-alert';
+@use 'components/ion-button';
+@use 'components/ion-card';
+@use 'components/ion-chip';
+@use 'components/ion-content';
+@use 'components/ion-datetime';
+@use 'components/ion-fab';
+@use 'components/ion-list';
+@use 'components/ion-loading';
+@use 'components/ion-modal';
+@use 'components/ion-picker';
+@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';
+@use 'components/ion-toolbar';

package/src/styles/md-remove-ios-class-effect.scss

@@ -0,0 +1,41 @@
+ion-toolbar.md:not(.ios26-disabled) {
+  /**
+   * This will add margin-inline to the ion-button
+   * for ion-buttons are removed due to collapse.
+   */
+  & > ion-back-button {
+    &[slot='start'] {
+      margin-inline-start: 4px;
+    }
+    &[slot='end'] {
+      margin-inline-end: 4px;
+    }
+  }
+}
+
+ion-buttons.md {
+  /**
+   * ion-buttons.ios26-disabled > ion-button.button-default is for ios26 structure.
+   * for .md, remove button-default styles. Will be button-clear.
+   */
+  ion-button.md:not(.ios26-disabled).button-default {
+    // copy .button-clear
+    --color: initial;
+    --background: transparent;
+    --background-activated: transparent;
+    --background-focused: transparent;
+    --background-hover: transparent;
+
+    // copy .button-has-icon-only.button-clear
+    &.button-has-icon-only {
+      --padding-top: 12px;
+      --padding-end: 12px;
+      --padding-bottom: 12px;
+      --padding-start: 12px;
+      --border-radius: 50%;
+      margin: 0;
+      width: 3rem;
+      height: 3rem;
+    }
+  }
+}

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

@@ -0,0 +1,98 @@
+@mixin ion-list-inset() {
+  background: transparent;
+
+  ion-list-header {
+    display: flex;
+    align-items: center;
+
+    ion-label {
+      font-size: 0.9rem;
+      margin: 8px 4px 4px;
+      color: var(--ion-color-medium-tint);
+    }
+
+    ion-button {
+      margin-top: 8px;
+    }
+
+    ion-note {
+      font-size: 0.9rem;
+      margin: 8px 16px 4px 0;
+    }
+  }
+
+  // TODO: これはUtility Classにマイグレートする必要があります
+  ion-item-group.header-item-group {
+    & > 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;
+        color: #ffffff;
+        border-radius: 20%;
+        padding: 6px;
+      }
+
+      h2 {
+        font-size: 1.2rem;
+        font-weight: bold;
+        margin-top: 8px;
+      }
+
+      ion-text {
+        font-size: 0.9rem;
+      }
+    }
+  }
+
+  ion-item-group,
+  ion-reorder-group,
+  ion-accordion-group,
+  ion-radio-group {
+    ion-item {
+      ion-text[slot='end'] {
+        padding-left: 8px;
+      }
+
+      &.item-disabled {
+        opacity: 1;
+
+        & > * {
+          opacity: 0.4;
+        }
+
+        &::part(detail-icon) {
+          opacity: 0.1;
+        }
+      }
+
+      ion-button[slot='end'] {
+        &.ion-align-self-end {
+          transform: translateY(-7px);
+        }
+        ion-icon[slot='icon-only'] {
+          font-size: 1.2rem !important;
+          transform: translateY(4px);
+        }
+      }
+    }
+  }
+
+  & > ion-note {
+    color: var(--ion-color-medium-tint);
+    font-size: 0.9rem;
+    display: block;
+    margin: 8px calc(20px + var(--ion-safe-area-right)) 8px calc(20px + var(--ion-safe-area-left));
+  }
+}