@rdlabo/ionic-theme-ios27 1.1.0 → 1.2.0-0

package/dist/css/vertical-bars.css

@@ -0,0 +1 @@
+@property --ios-theme-split-pane-width{syntax:"<length>";inherits:false;initial-value:320px}ion-split-pane.ios-theme-split-pane-half-open{--ios-theme-split-pane-width: 50vw}ion-app.ios-theme-vertical-bars{--ios-theme-vertical-bars-safe-area-left-resolved: var(--ios-theme-vertical-bars-safe-area-left, 0px);--ios-theme-vertical-bars-safe-area-right-resolved: var( --ios-theme-vertical-bars-safe-area-right, var(--ios-theme-vertical-bars-native-inset, max(80px, env(safe-area-inset-right, 0px))) )}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-left{--ios-theme-vertical-bars-safe-area-left-resolved: var( --ios-theme-vertical-bars-safe-area-left, var(--ios-theme-vertical-bars-native-inset, max(80px, env(safe-area-inset-left, 0px))) );--ios-theme-vertical-bars-safe-area-right-resolved: var(--ios-theme-vertical-bars-safe-area-right, 0px)}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready>:is(ion-menu-button,ion-button).ios-theme-vertical-bars-toolbar-projection{--ios26-glass-background-rgb: var(--ion-background-color-rgb, 255, 255, 255);--ios26-glass-border-color-rgb: var(--ion-background-color-rgb, 255, 255, 255);--ios26-glass-box-shadow-color-rgb: var(--ion-text-color-rgb, 0, 0, 0)}ion-app.ios-theme-vertical-bars .ios-transition-shade{clip-path:inset(0 var(--ios-theme-vertical-bars-safe-area-right-resolved) 0 var(--ios-theme-vertical-bars-safe-area-left-resolved))}ion-app.ios-theme-vertical-bars ion-content:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):not(:where(ion-menu *,ion-modal *,ion-popover *)){--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}ion-app.ios-theme-vertical-bars ion-content:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):not(:where(ion-menu *,ion-modal *,ion-popover *))::part(scroll){padding-inline-start:calc(var(--padding-start, 0px) + var(--ios-theme-vertical-bars-safe-area-left-resolved));padding-inline-end:calc(var(--padding-end, 0px) + var(--ios-theme-vertical-bars-safe-area-right-resolved))}ion-app.ios-theme-vertical-bars ion-content:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):not(:where(ion-menu *,ion-modal *,ion-popover *)):dir(rtl)::part(scroll){padding-inline-start:calc(var(--padding-start, 0px) + var(--ios-theme-vertical-bars-safe-area-right-resolved));padding-inline-end:calc(var(--padding-end, 0px) + var(--ios-theme-vertical-bars-safe-area-left-resolved))}ion-app.ios-theme-vertical-bars ion-toolbar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):not(:where(ion-menu *,ion-modal *,ion-popover *)){--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}ion-app.ios-theme-vertical-bars ion-toolbar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):not(:where(ion-menu *,ion-modal *,ion-popover *)):not(:where(ion-header.header-collapse-condense *,ion-footer.footer-collapse-fade *))::part(container){padding-inline-start:calc(var(--padding-start, 0px) + var(--ios-theme-vertical-bars-safe-area-left-resolved));padding-inline-end:calc(var(--padding-end, 0px) + var(--ios-theme-vertical-bars-safe-area-right-resolved))}ion-app.ios-theme-vertical-bars ion-toolbar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):not(:where(ion-menu *,ion-modal *,ion-popover *)):not(:where(ion-header.header-collapse-condense *,ion-footer.footer-collapse-fade *)):dir(rtl)::part(container){padding-inline-start:calc(var(--padding-start, 0px) + var(--ios-theme-vertical-bars-safe-area-right-resolved));padding-inline-end:calc(var(--padding-end, 0px) + var(--ios-theme-vertical-bars-safe-area-left-resolved))}ion-app.ios-theme-vertical-bars ion-fab:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):not(:where(ion-menu *,ion-modal *,ion-popover *)){--ion-safe-area-left: 0px;--ion-safe-area-right: 0px;--ios-theme-vertical-bars-fab-edge-gap: 16px;--ios-theme-vertical-bars-fab-start-offset: var(--ios-theme-menu-width, var(--ios26-menu-width, 0px))}ion-app.ios-theme-vertical-bars ion-fab:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):not(:where(ion-menu *,ion-modal *,ion-popover *)).fab-horizontal-start{inset-inline-start:calc(var(--ios-theme-vertical-bars-fab-edge-gap) + var(--ios-theme-vertical-bars-fab-start-offset) + var(--ios-theme-vertical-bars-safe-area-left-resolved))}ion-app.ios-theme-vertical-bars ion-fab:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):not(:where(ion-menu *,ion-modal *,ion-popover *)).fab-horizontal-end{inset-inline-end:calc(var(--ios-theme-vertical-bars-fab-edge-gap) + var(--ios-theme-vertical-bars-safe-area-right-resolved))}ion-app.ios-theme-vertical-bars ion-fab:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):not(:where(ion-menu *,ion-modal *,ion-popover *)):dir(rtl).fab-horizontal-start{inset-inline-start:calc(var(--ios-theme-vertical-bars-fab-edge-gap) + var(--ios-theme-vertical-bars-fab-start-offset) + var(--ios-theme-vertical-bars-safe-area-right-resolved))}ion-app.ios-theme-vertical-bars ion-fab:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):not(:where(ion-menu *,ion-modal *,ion-popover *)):dir(rtl).fab-horizontal-end{inset-inline-end:calc(var(--ios-theme-vertical-bars-fab-edge-gap) + var(--ios-theme-vertical-bars-safe-area-left-resolved))}ion-app.ios-theme-vertical-bars ion-fab:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):not(:where(ion-menu *,ion-modal *,ion-popover *)):has(.fab-button-small){--ios-theme-vertical-bars-fab-edge-gap: 10px}ion-app.ios-theme-vertical-bars ion-menu:is(.ios,.md).menu-side-end:not(:dir(rtl)):not(.ios-theme-disabled,.ios26-disabled),ion-app.ios-theme-vertical-bars ion-menu:is(.ios,.md).menu-side-start:dir(rtl):not(.ios-theme-disabled,.ios26-disabled){--ion-safe-area-right: 0px}ion-app.ios-theme-vertical-bars ion-menu:is(.ios,.md).menu-side-end:not(:dir(rtl)):not(.ios-theme-disabled,.ios26-disabled)::part(container),ion-app.ios-theme-vertical-bars ion-menu:is(.ios,.md).menu-side-start:dir(rtl):not(.ios-theme-disabled,.ios26-disabled)::part(container){margin-right:var(--ios-theme-vertical-bars-safe-area-right-resolved)}ion-app.ios-theme-vertical-bars ion-menu:is(.ios,.md).menu-side-start:not(:dir(rtl)):not(.ios-theme-disabled,.ios26-disabled),ion-app.ios-theme-vertical-bars ion-menu:is(.ios,.md).menu-side-end:dir(rtl):not(.ios-theme-disabled,.ios26-disabled){--ion-safe-area-left: 0px}ion-app.ios-theme-vertical-bars ion-menu:is(.ios,.md).menu-side-start:not(:dir(rtl)):not(.ios-theme-disabled,.ios26-disabled)::part(container),ion-app.ios-theme-vertical-bars ion-menu:is(.ios,.md).menu-side-end:dir(rtl):not(.ios-theme-disabled,.ios26-disabled)::part(container){margin-left:var(--ios-theme-vertical-bars-safe-area-left-resolved)}ion-app.ios-theme-vertical-bars ion-tabs:not(:where(ion-menu *,ion-modal *,ion-popover *))>ion-tab-bar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled){--ios-theme-side-tab-bar-width: 50px;--ios-theme-side-tab-bar-gap: 8px;--ios-theme-side-safe-area: var(--ios-theme-vertical-bars-safe-area-right-resolved);contain:layout style;position:absolute;z-index:2;display:flex;flex-direction:column;width:46px;min-width:46px;max-width:46px;height:fit-content;min-height:0;padding:2px;border-radius:25px;left:auto;right:max(4px,(var(--ios-theme-side-safe-area) - var(--ios-theme-side-tab-bar-width))/2);margin:0;top:auto;bottom:calc(var(--ion-safe-area-bottom, 0px) + var(--ios-theme-side-tab-bar-gap))}ion-app.ios-theme-vertical-bars ion-tabs:not(:where(ion-menu *,ion-modal *,ion-popover *))>ion-tab-bar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled)>ion-tab-button:not(.ion-cloned-element){display:block;flex:none;width:46px;min-width:46px;height:52px;min-height:52px;border-radius:23px}ion-app.ios-theme-vertical-bars ion-tabs:not(:where(ion-menu *,ion-modal *,ion-popover *))>ion-tab-bar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled)>ion-tab-button:not(.ion-cloned-element)::part(native){justify-content:center}ion-app.ios-theme-vertical-bars ion-tabs:not(:where(ion-menu *,ion-modal *,ion-popover *))>ion-tab-bar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled)>ion-tab-button:not(.ion-cloned-element) ion-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}ion-app.ios-theme-vertical-bars ion-tabs:not(:where(ion-menu *,ion-modal *,ion-popover *))>ion-tab-bar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled)>ion-tab-button:not(.ion-cloned-element) ion-icon{margin:0;font-size:28px}ion-app.ios-theme-vertical-bars ion-tabs:not(:where(ion-menu *,ion-modal *,ion-popover *))>ion-tab-bar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled)>ion-tab-button:not(.ion-cloned-element)~ion-tab-button:not(.ion-cloned-element){margin-block-start:0;margin-inline-start:0}ion-app.ios-theme-vertical-bars ion-tabs:not(:where(ion-menu *,ion-modal *,ion-popover *))>ion-tab-bar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):has(>ion-tab-button:is(.ion-activated,:active))>ion-tab-button:not(.ion-cloned-element)::part(native){flex-direction:column;padding-block:4px}ion-app.ios-theme-vertical-bars ion-tabs:not(:where(ion-menu *,ion-modal *,ion-popover *))>ion-tab-bar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):has(>ion-tab-button:is(.ion-activated,:active))>ion-tab-button:not(.ion-cloned-element) ion-label{position:static;width:auto;height:auto;max-width:44px;padding:0;margin:1px 0 0;overflow:hidden;clip:auto;font-size:.5rem;line-height:1;text-overflow:ellipsis;white-space:nowrap}ion-app.ios-theme-vertical-bars ion-tabs:not(:where(ion-menu *,ion-modal *,ion-popover *))>ion-tab-bar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):has(>ion-tab-button:is(.ion-activated,:active))>ion-tab-button:not(.ion-cloned-element) ion-icon{margin:0;font-size:22px}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-left ion-tabs:not(:where(ion-menu *,ion-modal *,ion-popover *))>ion-tab-bar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled){--ios-theme-side-safe-area: var(--ios-theme-vertical-bars-safe-area-left-resolved);right:auto;left:max(4px,(var(--ios-theme-side-safe-area) - var(--ios-theme-side-tab-bar-width))/2)}.ios-theme-native-ui-shell-prehidden{position:absolute !important;visibility:hidden !important}html.ios-theme-native-ui-shell-prehide ion-app.ios-theme-vertical-bars ion-back-button:not([icon],[color],.ios-theme-vertical-bars-back-web-owned,.ionic-theme-disabled,.ios-theme-disabled,.ios26-disabled,.ios-theme-vertical-bars-back-button-projection):not(:where(ion-menu *,ion-modal *,ion-popover *,ion-header[collapse] *,ion-footer[collapse] *,ion-buttons.ios-theme-horizontal-only *,.ios-theme-shell-disabled *,.ionic-theme-disabled *,.ios-theme-disabled *,.ios26-disabled *)){position:absolute !important;visibility:hidden !important}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready ion-toolbar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):not(:where(ion-menu *,ion-modal *,ion-popover *)) ion-back-button:is(.ios,.md)[data-native-ui-shell]:not(.ios-theme-disabled,.ios26-disabled,.ios-theme-vertical-bars-back-button-projection){display:none}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready ion-toolbar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):not(:where(ion-menu *,ion-modal *,ion-popover *)) ion-buttons:is(.ios,.md)>:is(ion-button,ion-menu-button):is(.ios,.md)[data-native-ui-shell]:not(.ios-theme-disabled,.ios26-disabled,.ios-theme-vertical-bars-toolbar-action){display:none}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready ion-toolbar:is(.ios,.md):not(.ios-theme-disabled,.ios26-disabled):not(:where(ion-menu *,ion-modal *,ion-popover *)) ion-buttons:is(.ios,.md):has(>:is(ion-back-button,ion-button,ion-menu-button)[data-native-ui-shell]):not(:has(>:is(ion-back-button,ion-button,ion-menu-button):not([data-native-ui-shell]))){display:none}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready>ion-back-button.ios-theme-vertical-bars-back-button-projection{position:fixed;z-index:1001;top:var(--ios-theme-vertical-bars-toolbar-top, 220px);right:max(4px,(var(--ios-theme-vertical-bars-safe-area-right-resolved) - 46px)/2);display:block;width:46px;height:46px;margin:0}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready>:is(.ios,.md).ios-theme-vertical-bars-toolbar-projection{position:fixed;z-index:1001;top:calc(var(--ios-theme-vertical-bars-toolbar-top, 220px) + var(--ios-theme-vertical-bars-toolbar-offset, 0px));right:max(4px,(var(--ios-theme-vertical-bars-safe-area-right-resolved) - 46px)/2);width:46px;min-width:46px;height:46px;min-height:46px;margin:0}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready>:is(.ios,.md).ios-theme-vertical-bars-toolbar-projection :is(ion-icon,svg){width:22px;height:22px;margin:0;font-size:22px}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready>ion-menu-button:is(.ios,.md).ios-theme-vertical-bars-toolbar-projection{backdrop-filter:blur(2px) saturate(360%);transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.72);box-shadow:inset 0 1px 2px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.25),inset 0 -1px 2px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.3),0 -0.5px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.65),0 .5px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.65),0 0 0 .5px rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.22),0 .5px 1px rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08);border:.5px solid rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)));background-image:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%);background-origin:padding-box;background-clip:border-box;border-inline-color:rgba(0,0,0,0)}@supports(background-clip: border-area){ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready>ion-menu-button:is(.ios,.md).ios-theme-vertical-bars-toolbar-projection{border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), transparent 50%, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)))),linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%),linear-gradient(transparent, transparent);background-origin:border-box,padding-box,border-box;background-clip:border-area,padding-box,border-box}}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready>ion-menu-button:is(.ios,.md).ios-theme-vertical-bars-toolbar-projection{border-radius:50%}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready>ion-button:is(.ios,.md).ios-theme-vertical-bars-toolbar-projection{--background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.72);--border-radius: 50%;--box-shadow:inset 0 1px 2px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.25),inset 0 -1px 2px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.3),0 -0.5px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.65),0 .5px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.65),0 0 0 .5px rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.22),0 .5px 1px rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08)}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready>ion-button:is(.ios,.md).ios-theme-vertical-bars-toolbar-projection::part(native){backdrop-filter:blur(2px) saturate(360%);transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:var(--box-shadow);border:.5px solid rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)));background-image:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%);background-origin:padding-box;background-clip:border-box;border-inline-color:rgba(0,0,0,0)}@supports(background-clip: border-area){ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready>ion-button:is(.ios,.md).ios-theme-vertical-bars-toolbar-projection::part(native){border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), transparent 50%, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)))),linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%),linear-gradient(transparent, transparent);background-origin:border-box,padding-box,border-box;background-clip:border-area,padding-box,border-box}}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready>ion-buttons:is(.ios,.md).ios-theme-vertical-bars-toolbar-projection{display:flex;flex-direction:column;height:auto;min-height:0}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready>ion-buttons:is(.ios,.md).ios-theme-vertical-bars-toolbar-projection>:is(ion-button,ion-menu-button):is(.ios,.md).ios-theme-vertical-bars-toolbar-action{display:block;width:44px;min-width:44px;height:46px;min-height:46px;margin:0 1px}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready>ion-buttons:is(.ios,.md).ios-theme-vertical-bars-toolbar-projection>:is(ion-button,ion-menu-button):is(.ios,.md).ios-theme-vertical-bars-toolbar-action::part(native){margin-inline:auto}ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-left>ion-back-button.ios-theme-vertical-bars-back-button-projection,ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-left>:is(.ios,.md).ios-theme-vertical-bars-toolbar-projection{right:auto;left:max(4px,(var(--ios-theme-vertical-bars-safe-area-left-resolved) - 46px)/2)}

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EACL,wBAAwB,IAAI,qBAAqB,EACjD,wBAAwB,IAAI,qBAAqB,GAClD,MAAM,2BAA2B,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAElD,eAAO,MAAM,oBAAoB,GAAI,eAAe,WAAW,KAAG,gBAAgB,GAAG,SAyBpF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EACL,wBAAwB,IAAI,qBAAqB,EACjD,wBAAwB,IAAI,qBAAqB,GAClD,MAAM,2BAA2B,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAElD,eAAO,MAAM,oBAAoB,GAAI,eAAe,WAAW,KAAG,gBAAgB,GAAG,SAgCpF,CAAC"}

package/dist/index.js

@@ -10,23 +10,30 @@ export const registerTabBarEffect = (targetElement) => {
     if (!targetElement.classList.contains('ios') || !win)
         return undefined;
     const reducedMotion = win.matchMedia('(prefers-reduced-motion: reduce)');
+    const verticalBarsRoot = targetElement.closest('ion-app');
     let effect;
     const update = () => {
         effect?.destroy();
-        effect = reducedMotion.matches
-            ? undefined
-            : registerEffect(targetElement, 'ion-tab-button', 'tab-selected', {
-                small: 'scale(1.1, 1)',
-                medium: 'scale(1.2)',
-                large: 'scale(1.15, 1.4)',
-                xlarge: 'scale(1.3)',
-            });
+        const isVertical = !!verticalBarsRoot?.classList.contains('ios-theme-vertical-bars') && !targetElement.closest('ion-menu, ion-modal, ion-popover');
+        effect =
+            reducedMotion.matches || isVertical
+                ? undefined
+                : registerEffect(targetElement, 'ion-tab-button', 'tab-selected', {
+                    small: 'scale(1.1, 1)',
+                    medium: 'scale(1.2)',
+                    large: 'scale(1.15, 1.4)',
+                    xlarge: 'scale(1.3)',
+                });
     };
     update();
     reducedMotion.addEventListener('change', update);
+    const placementObserver = new win.MutationObserver(update);
+    if (verticalBarsRoot)
+        placementObserver.observe(verticalBarsRoot, { attributes: true, attributeFilter: ['class'] });
     return {
         destroy: () => {
             reducedMotion.removeEventListener('change', update);
+            placementObserver.disconnect();
             effect?.destroy();
             effect = undefined;
         },

package/dist/native/components/index.d.ts

@@ -11,5 +11,6 @@ export type NativeUIShellComponent = (typeof components)[number]['tag'];
 export declare const selector: string;
 export declare const shadowSelector: string;
 export declare const motionSelector: string;
+export declare const isVerticalBarsCandidate: (element: HTMLElement) => boolean;
 export declare const readCandidate: (element: HTMLElement, id: Identify) => Candidate | undefined;
 //# sourceMappingURL=index.d.ts.map

package/dist/native/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/native/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AACvC,OAAO,KAAK,OAAO,MAAM,eAAe,CAAC;AACzC,OAAO,KAAK,UAAU,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,UAAU,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,OAAO,MAAM,eAAe,CAAC;AACzC,OAAO,KAAK,GAAG,MAAM,WAAW,CAAC;AAEjC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/D,eAAO,MAAM,UAAU,2HAA2E,CAAC;AACnG,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;AACxE,eAAO,MAAM,QAAQ,QAGR,CAAC;AACd,eAAO,MAAM,cAAc,QAGf,CAAC;AACb,eAAO,MAAM,cAAc,QAMf,CAAC;AAEb,eAAO,MAAM,aAAa,GAAI,SAAS,WAAW,EAAE,IAAI,QAAQ,KAAG,SAAS,GAAG,SAO9E,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/native/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AACvC,OAAO,KAAK,OAAO,MAAM,eAAe,CAAC;AACzC,OAAO,KAAK,UAAU,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,UAAU,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,OAAO,MAAM,eAAe,CAAC;AACzC,OAAO,KAAK,GAAG,MAAM,WAAW,CAAC;AAEjC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/D,eAAO,MAAM,UAAU,2HAA2E,CAAC;AACnG,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;AACxE,eAAO,MAAM,QAAQ,QAGR,CAAC;AACd,eAAO,MAAM,cAAc,QAGf,CAAC;AACb,eAAO,MAAM,cAAc,QAMf,CAAC;AAEb,eAAO,MAAM,uBAAuB,mCAAuB,CAAC;AAE5D,eAAO,MAAM,aAAa,GAAI,SAAS,WAAW,EAAE,IAAI,QAAQ,KAAG,SAAS,GAAG,SAc9E,CAAC"}

package/dist/native/components/index.js

@@ -5,7 +5,7 @@ import * as menuButton from './ion-menu-button';
 import * as tabBar from './ion-tab-bar';
 import * as segment from './ion-segment';
 import * as fab from './ion-fab';
-import { visible } from '../shared/dom';
+import { isDisabledButtonGroupChild, isVerticalBarsSource, visible } from '../shared/dom';
 export const components = [button, buttons, backButton, menuButton, tabBar, segment, fab];
 export const selector = components
     .map((component) => ('selector' in component ? component.selector : component.tag))
@@ -22,11 +22,16 @@ export const motionSelector = [
     'ion-toolbar',
     ...components.filter((component) => 'tracksMotion' in component && component.tracksMotion).map((component) => component.tag),
 ].join(', ');
+export const isVerticalBarsCandidate = isVerticalBarsSource;
 export const readCandidate = (element, id) => {
-    if (!element.classList.contains('ios') || !visible(element) || element.closest('ion-modal, ion-popover'))
+    const verticalBars = isVerticalBarsCandidate(element);
+    if ((!element.classList.contains('ios') && !verticalBars) || !visible(element, verticalBars) || element.closest('ion-modal, ion-popover'))
         return;
     const style = getComputedStyle(element);
-    if (!style.getPropertyValue('--ios-theme-glass-background-rgb').trim() && !style.getPropertyValue('--ios26-glass-background-rgb').trim())
+    if (!isDisabledButtonGroupChild(element) &&
+        !style.getPropertyValue('--ios-theme-glass-background-rgb').trim() &&
+        !style.getPropertyValue('--ios26-glass-background-rgb').trim() &&
+        !verticalBars)
         return;
     if (element.contains(element.ownerDocument.activeElement))
         return;

package/dist/native/components/ion-back-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ion-back-button.d.ts","sourceRoot":"","sources":["../../../src/native/components/ion-back-button.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/D,eAAO,MAAM,GAAG,oBAAoB,CAAC;AAErC,eAAO,MAAM,IAAI,GAAI,SAAS,WAAW,EAAE,IAAI,QAAQ,KAAG,SAAS,GAAG,SAMrE,CAAC"}
+{"version":3,"file":"ion-back-button.d.ts","sourceRoot":"","sources":["../../../src/native/components/ion-back-button.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/D,eAAO,MAAM,GAAG,oBAAoB,CAAC;AAErC,eAAO,MAAM,IAAI,GAAI,SAAS,WAAW,EAAE,IAAI,QAAQ,KAAG,SAAS,GAAG,SAYrE,CAAC"}

package/dist/native/components/ion-back-button.js

@@ -1,9 +1,12 @@
 import { createCandidate, appendItem } from '../shared/candidate';
-import { inFixedToolbar } from '../shared/dom';
+import { inFixedToolbar, isVerticalBarsSource } from '../shared/dom';
 export const tag = 'ion-back-button';
 export const read = (element, id) => {
     const button = element;
-    if (!inFixedToolbar(element) || button.icon !== undefined || button.color !== undefined || !button.shadowRoot)
+    if (!button.shadowRoot ||
+        button.icon !== undefined ||
+        button.color !== undefined ||
+        (!isVerticalBarsSource(element) && !inFixedToolbar(element)))
         return;
     const candidate = createCandidate(element, tag, id);
     const label = button.shadowRoot.querySelector('[part="text"]')?.textContent?.trim() ?? '';

package/dist/native/components/ion-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ion-button.d.ts","sourceRoot":"","sources":["../../../src/native/components/ion-button.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/D,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,GAAI,SAAS,WAAW,EAAE,IAAI,QAAQ,KAAG,SAAS,GAAG,SAKrE,CAAC"}
+{"version":3,"file":"ion-button.d.ts","sourceRoot":"","sources":["../../../src/native/components/ion-button.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/D,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,GAAI,SAAS,WAAW,EAAE,IAAI,QAAQ,KAAG,SAAS,GAAG,SAerE,CAAC"}

package/dist/native/components/ion-button.js

@@ -1,9 +1,17 @@
 import { createCandidate, appendItem } from '../shared/candidate';
-import { inFixedToolbar } from '../shared/dom';
+import { inFixedToolbar, isVerticalBarsToolbarAction, isVerticalBarsToolbarGroup } from '../shared/dom';
 export const tag = 'ion-button';
 export const read = (element, id) => {
     const button = element;
-    if (!inFixedToolbar(element) || button.fill !== 'default' || button.classList.contains('ion-color'))
+    const verticalBars = !element.closest('ion-menu, ion-modal, ion-popover') && !!element.closest('ion-app.ios-theme-vertical-bars');
+    if (verticalBars && element.parentElement && isVerticalBarsToolbarGroup(element.parentElement))
+        return;
+    const fill = button.fill ?? 'default';
+    if (!inFixedToolbar(element) ||
+        (verticalBars && !isVerticalBarsToolbarAction(element)) ||
+        (!verticalBars && fill !== 'default') ||
+        (verticalBars && !['default', 'clear'].includes(fill)) ||
+        button.classList.contains('ion-color'))
         return;
     const candidate = createCandidate(element, tag, id);
     return appendItem(candidate, element, id) ? candidate : undefined;

package/dist/native/components/ion-buttons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ion-buttons.d.ts","sourceRoot":"","sources":["../../../src/native/components/ion-buttons.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAI/D,eAAO,MAAM,GAAG,gBAAgB,CAAC;AACjC,eAAO,MAAM,YAAY,OAAO,CAAC;AAEjC,eAAO,MAAM,IAAI,GAAI,SAAS,WAAW,EAAE,IAAI,QAAQ,KAAG,SAAS,GAAG,SAqBrE,CAAC"}
+{"version":3,"file":"ion-buttons.d.ts","sourceRoot":"","sources":["../../../src/native/components/ion-buttons.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAI/D,eAAO,MAAM,GAAG,gBAAgB,CAAC;AACjC,eAAO,MAAM,YAAY,OAAO,CAAC;AAEjC,eAAO,MAAM,IAAI,GAAI,SAAS,WAAW,EAAE,IAAI,QAAQ,KAAG,SAAS,GAAG,SA0BrE,CAAC"}

package/dist/native/components/ion-buttons.js

@@ -1,19 +1,27 @@
 import { createCandidate, appendItem } from '../shared/candidate';
-import { inFixedToolbar } from '../shared/dom';
+import { childElements, verticalBarsToolbarActions, inFixedToolbar, isVerticalBarsToolbarGroup } from '../shared/dom';
 import * as menuButton from './ion-menu-button';
 export const tag = 'ion-buttons';
 export const tracksMotion = true;
 export const read = (element, id) => {
     if (!inFixedToolbar(element))
         return;
-    const children = Array.from(element.children);
+    let children = childElements(element);
     if (children.length === 1)
         return menuButton.read(element, id);
+    const verticalBars = !element.closest('ion-menu, ion-modal, ion-popover') && !!element.closest('ion-app.ios-theme-vertical-bars');
+    if (verticalBars && !isVerticalBarsToolbarGroup(element))
+        return;
+    if (verticalBars)
+        children = verticalBarsToolbarActions(element);
     if (!children.length ||
-        children.some((child) => !child.matches(`${menuButton.tag}.ios`) &&
-            (!child.matches('ion-button.ios.button-clear') || child.fill !== 'clear')))
+        children.some((child) => !child.matches(`${menuButton.tag}${verticalBars ? '' : '.ios'}`) &&
+            (!child.matches(`ion-button${verticalBars ? '' : '.ios.button-clear'}`) ||
+                !(verticalBars ? ['default', 'clear'] : ['clear']).includes(child.fill ?? 'default'))))
         return;
     const candidate = createCandidate(element, tag, id);
+    if (verticalBars && children.length !== childElements(element).length)
+        candidate.sources = children;
     for (const child of children) {
         const supported = child.matches(menuButton.tag)
             ? menuButton.append(candidate, child, id)

package/dist/native/components/ion-fab.js

@@ -1,4 +1,4 @@
-import { excluded, isDark, text } from '../shared/dom';
+import { childElements, excluded, isDark, text } from '../shared/dom';
 import { iconSource } from '../shared/icons';
 export const tag = 'ion-fab';
 export const shadowSelector = 'ion-fab-button, ion-fab-list';
@@ -6,14 +6,14 @@ const hasHostMotion = (style) => style.animationName !== 'none' || style.transit
 export const read = (fab, id) => {
     if (fab.slot !== 'fixed' || !fab.parentElement?.matches('ion-content') || fab.contains(fab.ownerDocument.activeElement))
         return;
-    const children = Array.from(fab.children);
+    const children = childElements(fab);
     const main = children.filter((child) => child.matches('ion-fab-button'));
     const lists = children.filter((child) => child.matches('ion-fab-list'));
     if (main.length !== 1 || main.length + lists.length !== children.length)
         return;
-    if (lists.some((list) => list.closest(excluded) || Array.from(list.children).some((child) => !child.matches('ion-fab-button'))))
+    if (lists.some((list) => list.closest(excluded) || childElements(list).some((child) => !child.matches('ion-fab-button'))))
         return;
-    const buttons = [main[0], ...lists.flatMap((list) => Array.from(list.children))];
+    const buttons = [main[0], ...lists.flatMap((list) => childElements(list))];
     const style = getComputedStyle(fab);
     if (hasHostMotion(style))
         return;

package/dist/native/components/ion-menu-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ion-menu-button.d.ts","sourceRoot":"","sources":["../../../src/native/components/ion-menu-button.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/D,eAAO,MAAM,GAAG,oBAAoB,CAAC;AAErC,eAAO,MAAM,QAAQ,KAAK,CAAC;AAC3B,eAAO,MAAM,cAAc,oBAAM,CAAC;AAElC,eAAO,MAAM,MAAM,GAAI,WAAW,SAAS,EAAE,QAAQ,wBAAwB,EAAE,IAAI,QAAQ,KAAG,OAI7F,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,WAAW,EAAE,IAAI,QAAQ,KAAG,SAAS,GAAG,SAMnE,CAAC"}
+{"version":3,"file":"ion-menu-button.d.ts","sourceRoot":"","sources":["../../../src/native/components/ion-menu-button.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/D,eAAO,MAAM,GAAG,oBAAoB,CAAC;AAErC,eAAO,MAAM,QAAQ,KAAK,CAAC;AAC3B,eAAO,MAAM,cAAc,oBAAM,CAAC;AAElC,eAAO,MAAM,MAAM,GAAI,WAAW,SAAS,EAAE,QAAQ,wBAAwB,EAAE,IAAI,QAAQ,KAAG,OAI7F,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,WAAW,EAAE,IAAI,QAAQ,KAAG,SAAS,GAAG,SAOnE,CAAC"}

package/dist/native/components/ion-menu-button.js

@@ -1,5 +1,5 @@
 import { createCandidate, appendItem } from '../shared/candidate';
-import { inFixedToolbar } from '../shared/dom';
+import { childElements, inFixedToolbar } from '../shared/dom';
 export const tag = 'ion-menu-button';
 export const selector = '';
 export const shadowSelector = tag;
@@ -10,10 +10,11 @@ export const append = (candidate, button, id) => {
     return !!content && !!appendItem(candidate, button, id, content);
 };
 export const read = (group, id) => {
-    if (!inFixedToolbar(group) || !group.matches('ion-buttons') || group.children.length !== 1)
+    const children = group.matches('ion-buttons') ? childElements(group) : [];
+    if (!inFixedToolbar(group) || children.length !== 1)
         return;
-    const button = group.firstElementChild;
-    if (!button?.matches(`${tag}.ios`))
+    const button = children[0];
+    if (!button?.matches(`${tag}${group.closest('ion-app.ios-theme-vertical-bars') ? '' : '.ios'}`))
         return;
     const candidate = createCandidate(group, tag, id);
     return append(candidate, button, id) ? candidate : undefined;

package/dist/native/components/searchable-tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"searchable-tabs.d.ts","sourceRoot":"","sources":["../../../src/native/components/searchable-tabs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,EAA0B,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmB/E,eAAO,MAAM,mBAAmB,GAAI,KAAK,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,EAAE,UAAU,MAAM,IAAI;sBA8InF,OAAO;;yBAmBJ,SAAS,EAAE,WAAW,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,GAAG,SAAS,EAAE;yBAlJhE,mBAAmB;;mBA0U9B,mBAAmB,YAAY,MAAM;uBAKjC,mBAAmB,UAAU,OAAO;qBAUtC,WAAW;gBAGhB,MAAM,EAAE;iBASP,gBAAgB;oBAqCb,mBAAmB;;CAoBtC,CAAC"}
+{"version":3,"file":"searchable-tabs.d.ts","sourceRoot":"","sources":["../../../src/native/components/searchable-tabs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,EAA0B,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmB/E,eAAO,MAAM,mBAAmB,GAAI,KAAK,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,EAAE,UAAU,MAAM,IAAI;sBA8InF,OAAO;;yBAmBJ,SAAS,EAAE,WAAW,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,GAAG,SAAS,EAAE;yBAlJhE,mBAAmB;;mBAkV9B,mBAAmB,YAAY,MAAM;uBAKjC,mBAAmB,UAAU,OAAO;qBAUtC,WAAW;gBAGhB,MAAM,EAAE;iBASP,gBAAgB;oBAqCb,mBAAmB;;CAoBtC,CAAC"}

package/dist/native/components/searchable-tabs.js

@@ -184,7 +184,10 @@ export const createSearchSupport = (doc, id, schedule) => {
             };
             for (const binding of bindings) {
                 const candidate = candidates.find((c) => c.element === binding.tabBar);
-                if (!candidate || candidate.control.search || binding.tabBar.getAttribute('slot') !== 'bottom')
+                if (!candidate ||
+                    candidate.control.search ||
+                    candidate.control.placement === 'vertical-bars' ||
+                    binding.tabBar.getAttribute('slot') !== 'bottom')
                     continue;
                 const fab = binding.trigger.parentElement;
                 if (!fab?.matches('ion-fab[slot="fixed"]') ||

package/dist/native/definitions.d.ts

@@ -10,6 +10,7 @@ export interface NativeUIShellStatus {
 export interface NativeUIShellOptions {
     enabled?: boolean;
     controls?: NativeUIShellControls;
+    verticalBarsOnly?: boolean;
 }
 export interface NativeUIShellControls {
     tabs?: boolean;
@@ -22,6 +23,19 @@ export interface NativeUIShellHandle {
     suspend(): Promise<NativeUIShellSuspension>;
     destroy(): Promise<void>;
 }
+export type VerticalBarEdge = 'leading' | 'trailing' | null;
+export interface VerticalBarPlacement {
+    edge: VerticalBarEdge;
+    inset: number;
+}
+export declare enum HingeStatus {
+    Closed = "closed",
+    PartiallyOpen = "partiallyOpen",
+    FullyOpen = "fullyOpen"
+}
+export interface VerticalControlAreaHandle extends NativeUIShellHandle {
+    setPlacement(placement: VerticalBarEdge | VerticalBarPlacement, rtl?: boolean): void;
+}
 export interface NativeUIShellSuspension {
     resume(): Promise<void>;
 }
@@ -63,6 +77,8 @@ export interface ShellItem extends Frame {
 export interface ShellControl extends Frame {
     id: string;
     kind: NativeUIShellComponent;
+    placement?: 'vertical-bars';
+    toolbarSlot?: 'start' | 'end';
     items: ShellItem[];
     dark: boolean;
     rtl: boolean;
@@ -96,6 +112,7 @@ export interface ShellSnapshot {
     revision: number;
     transitionDuration?: number;
     viewportWidth: number;
+    verticalBarEdge?: 'left' | 'right';
     controls: ShellControl[];
 }
 export interface ShellActivation {
@@ -106,11 +123,20 @@ export interface ShellActivation {
 export interface WebViewMetrics {
     radius: number;
 }
+export interface DeviceLayout {
+    placement: VerticalBarPlacement;
+    hingeStatus: HingeStatus | null;
+    webViewMetrics: WebViewMetrics;
+}
 export interface NativeUIShellPlugin {
-    configure(): Promise<{
+    configure(options?: {
+        verticalBarsOnly?: boolean;
+    }): Promise<{
         supported: boolean;
     }>;
-    getWebViewMetrics(): Promise<WebViewMetrics>;
+    getDeviceLayout(): Promise<DeviceLayout>;
+    startDeviceLayoutMonitoring(): Promise<void>;
+    stopDeviceLayoutMonitoring(): Promise<void>;
     update(snapshot: ShellSnapshot): Promise<{
         revision: number;
         rejectedSearches?: string[];
@@ -121,6 +147,6 @@ export interface NativeUIShellPlugin {
     }): Promise<void>;
     addListener(name: 'activate', listener: (event: ShellActivation) => void): Promise<PluginListenerHandle>;
     addListener(name: 'search', listener: (event: ShellSearchEvent) => void): Promise<PluginListenerHandle>;
-    addListener(name: 'webViewMetricsChange', listener: (event: WebViewMetrics) => void): Promise<PluginListenerHandle>;
+    addListener(name: 'deviceLayoutChange', listener: (event: DeviceLayout) => void): Promise<PluginListenerHandle>;
 }
 //# sourceMappingURL=definitions.d.ts.map

package/dist/native/definitions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"definitions.d.ts","sourceRoot":"","sources":["../../src/native/definitions.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"definitions.d.ts","sourceRoot":"","sources":["../../src/native/definitions.ts"],"names":[],"mappings":"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"}

package/dist/native/definitions.js

@@ -1 +1,6 @@
-export {};
+export var HingeStatus;
+(function (HingeStatus) {
+    HingeStatus["Closed"] = "closed";
+    HingeStatus["PartiallyOpen"] = "partiallyOpen";
+    HingeStatus["FullyOpen"] = "fullyOpen";
+})(HingeStatus || (HingeStatus = {}));

package/dist/native/index.d.ts

@@ -1,5 +1,9 @@
-import type { NativeUIShellHandle, NativeUIShellOptions, WebViewMetrics } from './definitions';
-export type { NativeUIShellComponent, NativeUIShellControls, NativeUIShellHandle, NativeUIShellOptions, NativeUIShellStatus, NativeUIShellSuspension, WebViewMetrics, } from './definitions';
+import type { NativeUIShellHandle, NativeUIShellOptions, NativeUIShellPlugin, VerticalBarEdge, VerticalBarPlacement, VerticalControlAreaHandle, WebViewMetrics } from './definitions';
+export type { NativeUIShellComponent, NativeUIShellControls, NativeUIShellHandle, NativeUIShellOptions, NativeUIShellStatus, NativeUIShellSuspension, DeviceLayout, VerticalBarEdge, VerticalBarPlacement, VerticalControlAreaHandle, WebViewMetrics, } from './definitions';
+export { HingeStatus } from './definitions';
+export declare const IonicNativeUIShell: NativeUIShellPlugin;
 export declare const configureNativeTransition: () => Promise<WebViewMetrics>;
+export declare const setVerticalControlAreaPlacement: (placement: VerticalBarEdge | VerticalBarPlacement, rtl?: boolean) => void;
+export declare const enableVerticalControlArea: () => Promise<VerticalControlAreaHandle>;
 export declare const enableNativeUIShell: (options?: NativeUIShellOptions) => Promise<NativeUIShellHandle>;
 //# sourceMappingURL=index.d.ts.map

package/dist/native/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/native/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,oBAAoB,EAAuB,cAAc,EAAE,MAAM,eAAe,CAAC;AAGpH,YAAY,EACV,sBAAsB,EACtB,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,GACf,MAAM,eAAe,CAAC;AAWvB,eAAO,MAAM,yBAAyB,QAAa,OAAO,CAAC,cAAc,CAIxE,CAAC;AAGF,eAAO,MAAM,mBAAmB,GAAI,UAAS,oBAAyB,KAAG,OAAO,CAAC,mBAAmB,CA8BnG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/native/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,EACf,oBAAoB,EACpB,yBAAyB,EACzB,cAAc,EACf,MAAM,eAAe,CAAC;AAIvB,YAAY,EACV,sBAAsB,EACtB,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,YAAY,EACZ,eAAe,EACf,oBAAoB,EACpB,yBAAyB,EACzB,cAAc,GACf,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,eAAO,MAAM,kBAAkB,qBAAS,CAAC;AAoEzC,eAAO,MAAM,yBAAyB,QAAa,OAAO,CAAC,cAAc,CAKxE,CAAC;AAYF,eAAO,MAAM,+BAA+B,GAAI,WAAW,eAAe,GAAG,oBAAoB,EAAE,MAAM,OAAO,KAAG,IASlH,CAAC;AAGF,eAAO,MAAM,yBAAyB,QAAa,OAAO,CAAC,yBAAyB,CAQnF,CAAC;AAGF,eAAO,MAAM,mBAAmB,GAAI,UAAS,oBAAyB,KAAG,OAAO,CAAC,mBAAmB,CA2FnG,CAAC"}

package/dist/native/index.js

@@ -1,23 +1,100 @@
 import { Capacitor, registerPlugin } from '@capacitor/core';
 import { setConfig } from '../transition/ios.transition';
-import { bindMetricsLifecycle } from './lifecycle';
 import { createRuntime } from './runtime';
+import { createVerticalBarsWebProjection } from './vertical-bars-web';
+import { prehideVerticalBarsToolbarSources } from './prehide';
+export { HingeStatus } from './definitions';
 const plugin = registerPlugin('IonicNativeUIShell');
+export const IonicNativeUIShell = plugin;
 let active;
+let activeConfiguration;
 const web = (reason) => ({
     getStatus: () => ({ state: 'web', projected: 0, updates: 0, reason }),
     suspend: async () => ({ resume: async () => { } }),
     destroy: async () => { },
 });
+const combine = (native, fallback) => ({
+    getStatus() {
+        const nativeStatus = native.getStatus();
+        const fallbackStatus = fallback.getStatus();
+        return {
+            ...nativeStatus,
+            state: nativeStatus.state === 'stopped' && fallbackStatus.state === 'stopped' ? 'stopped' : nativeStatus.projected > 0 ? 'native' : 'web',
+            projected: nativeStatus.projected + fallbackStatus.projected,
+            updates: nativeStatus.updates + fallbackStatus.updates,
+        };
+    },
+    async suspend() {
+        const [nativeLease, fallbackLease] = await Promise.all([native.suspend(), fallback.suspend()]);
+        return { resume: async () => void (await Promise.all([nativeLease.resume(), fallbackLease.resume()])) };
+    },
+    async destroy() {
+        await Promise.all([native.destroy(), fallback.destroy()]);
+    },
+});
+const manage = (handle, lifecycle = {}) => {
+    let destroyed = false;
+    return {
+        getStatus: () => (lifecycle.reason ? { ...handle.getStatus(), reason: lifecycle.reason } : handle.getStatus()),
+        async suspend() {
+            const lease = await handle.suspend();
+            const resume = lifecycle.suspend?.();
+            return {
+                async resume() {
+                    await lease.resume();
+                    resume?.();
+                },
+            };
+        },
+        async destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            try {
+                await handle.destroy();
+            }
+            finally {
+                await lifecycle.destroy?.();
+                lifecycle.release?.();
+            }
+        },
+    };
+};
 export const configureNativeTransition = async () => {
-    const metrics = typeof document !== 'undefined' && Capacitor.getPlatform() === 'ios' ? await plugin.getWebViewMetrics() : { radius: 0 };
+    const metrics = typeof document !== 'undefined' && Capacitor.getPlatform() === 'ios' ? (await plugin.getDeviceLayout()).webViewMetrics : { radius: 0 };
     setConfig({ radius: metrics.radius });
     return metrics;
 };
+const physicalVerticalBarEdge = (edge, rtl) => (edge === 'leading') !== rtl ? 'left' : 'right';
+const elementRtl = (element) => element.closest('[dir]')?.getAttribute('dir') === 'rtl';
+export const setVerticalControlAreaPlacement = (placement, rtl) => {
+    if (typeof document === 'undefined')
+        return;
+    const app = document.querySelector('ion-app');
+    if (!app)
+        throw new Error('Vertical Control Area requires ion-app');
+    const { edge, inset } = placement && typeof placement === 'object' ? placement : { edge: placement, inset: 0 };
+    app.classList.toggle('ios-theme-vertical-bars', edge !== null);
+    app.classList.toggle('ios-theme-vertical-bars-left', edge !== null && physicalVerticalBarEdge(edge, rtl ?? elementRtl(app)) === 'left');
+    if (edge && Number.isFinite(inset) && inset > 0)
+        app.style.setProperty('--ios-theme-vertical-bars-native-inset', `${inset}px`);
+    else
+        app.style.removeProperty('--ios-theme-vertical-bars-native-inset');
+};
+export const enableVerticalControlArea = async () => {
+    const handle = await enableNativeUIShell({ controls: { tabs: true, toolbar: true }, verticalBarsOnly: true });
+    return {
+        getStatus: () => handle.getStatus(),
+        suspend: () => handle.suspend(),
+        destroy: () => handle.destroy(),
+        setPlacement: setVerticalControlAreaPlacement,
+    };
+};
 export const enableNativeUIShell = (options = {}) => {
     if (options.enabled === false) {
         const current = active;
         active = undefined;
+        activeConfiguration = undefined;
         return current
             ? current.then(async (handle) => {
                 await handle.destroy();
@@ -25,21 +102,81 @@ export const enableNativeUIShell = (options = {}) => {
             })
             : Promise.resolve(web('Disabled'));
     }
-    if (typeof document === 'undefined' || Capacitor.getPlatform() !== 'ios')
-        return Promise.resolve(web('Requires Capacitor iOS'));
-    return (active ?? (active = (async () => {
-        try {
-            await configureNativeTransition().catch(() => undefined);
-            if (!(await plugin.configure()).supported) {
-                active = undefined;
-                return web('Requires iOS 26 or later');
-            }
-            const runtime = await createRuntime(document, plugin, options);
-            return await bindMetricsLifecycle(runtime, () => plugin.addListener('webViewMetricsChange', (metrics) => setConfig({ radius: metrics.radius })), () => (active = undefined));
-        }
-        catch (error) {
+    if (typeof document === 'undefined')
+        return Promise.resolve(web('Requires a document'));
+    const controls = options.controls;
+    const configuration = JSON.stringify([
+        options.verticalBarsOnly === true,
+        ...['tabs', 'toolbar', 'segment', 'fab'].map((component) => !controls || controls[component] === true),
+    ]);
+    if (active && activeConfiguration !== configuration)
+        return Promise.reject(new Error('Native UI Shell is already running with different controls; destroy it before changing configuration.'));
+    if (active)
+        return active;
+    activeConfiguration = configuration;
+    const prehide = options.controls === undefined || options.controls.toolbar === true ? prehideVerticalBarsToolbarSources(document) : undefined;
+    let start;
+    const release = () => {
+        if (active === start) {
             active = undefined;
-            return web(error instanceof Error ? error.message : String(error));
+            activeConfiguration = undefined;
         }
-    })()));
+    };
+    const fallback = (reason) => manage(createVerticalBarsWebProjection(document, options), {
+        reason,
+        suspend: () => prehide?.suspend(),
+        destroy: () => prehide?.stop(),
+        release,
+    });
+    return (start = active =
+        (async () => {
+            if (Capacitor.getPlatform() !== 'ios')
+                return fallback('Requires Capacitor iOS');
+            let runtime;
+            let placementListener;
+            let monitoring = false;
+            try {
+                if (!options.verticalBarsOnly)
+                    await configureNativeTransition().catch(() => undefined);
+                const capabilities = await plugin.configure({ verticalBarsOnly: options.verticalBarsOnly === true });
+                if (!capabilities.supported)
+                    return fallback('Requires iOS 26 or later');
+                let nativeEdge = null;
+                const nativeVerticalBars = () => {
+                    const root = document.querySelector('ion-app.ios-theme-vertical-bars');
+                    if (!root)
+                        return false;
+                    const domEdge = root.classList.contains('ios-theme-vertical-bars-left') ? 'left' : 'right';
+                    return nativeEdge === null || physicalVerticalBarEdge(nativeEdge, elementRtl(root)) === domEdge;
+                };
+                await plugin.startDeviceLayoutMonitoring();
+                monitoring = true;
+                placementListener = await plugin.addListener('deviceLayoutChange', ({ placement, webViewMetrics }) => {
+                    nativeEdge = placement.edge;
+                    if (!options.verticalBarsOnly)
+                        setConfig({ radius: webViewMetrics.radius });
+                    document.defaultView?.dispatchEvent(new Event('nativeUIShellRefresh'));
+                });
+                nativeEdge = (await plugin.getDeviceLayout()).placement.edge;
+                const native = await createRuntime(document, plugin, options, nativeVerticalBars, options.verticalBarsOnly === true);
+                runtime = combine(native, createVerticalBarsWebProjection(document, options, () => !nativeVerticalBars() || native.getStatus().state === 'stopped'));
+                return manage(runtime, {
+                    suspend: () => prehide?.suspend(),
+                    release,
+                    destroy: async () => {
+                        await placementListener?.remove().catch(() => { });
+                        if (monitoring)
+                            await plugin.stopDeviceLayoutMonitoring().catch(() => { });
+                        prehide?.stop();
+                    },
+                });
+            }
+            catch (error) {
+                await runtime?.destroy();
+                await placementListener?.remove().catch(() => { });
+                if (monitoring)
+                    await plugin.stopDeviceLayoutMonitoring().catch(() => { });
+                return fallback(error instanceof Error ? error.message : String(error));
+            }
+        })());
 };