@rdlabo/ionic-theme-ios27 1.2.0-beta.pr246.sha237333ceac21 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/css/components/ion-menu.css +1 -1
  2. package/dist/css/ionic-theme-ios27.css +1 -1
  3. package/dist/css/utils/searchable.css +1 -1
  4. package/dist/css/vertical-bars.css +1 -1
  5. package/dist/native/components/searchable-tabs.js +1 -1
  6. package/dist/native/components/searchable-tabs.js.map +1 -1
  7. package/dist/native/vertical-bars-web-search.d.ts +9 -0
  8. package/dist/native/vertical-bars-web-search.d.ts.map +1 -0
  9. package/dist/native/vertical-bars-web-search.js +84 -0
  10. package/dist/native/vertical-bars-web-search.js.map +1 -0
  11. package/dist/native/vertical-bars-web.d.ts.map +1 -1
  12. package/dist/native/vertical-bars-web.js +20 -16
  13. package/dist/native/vertical-bars-web.js.map +1 -1
  14. package/dist/tab-bar-searchable/dismiss-button.d.ts +4 -0
  15. package/dist/tab-bar-searchable/dismiss-button.d.ts.map +1 -0
  16. package/dist/tab-bar-searchable/dismiss-button.js +34 -0
  17. package/dist/tab-bar-searchable/dismiss-button.js.map +1 -0
  18. package/dist/tab-bar-searchable/index.d.ts.map +1 -1
  19. package/dist/tab-bar-searchable/index.js +6 -0
  20. package/dist/tab-bar-searchable/index.js.map +1 -1
  21. package/docs/native-ui-shell.md +1 -1
  22. package/ios/Sources/IonicNativeUIShellPlugin/Components/ShellVerticalBars.swift +13 -0
  23. package/package.json +1 -1
  24. package/src/native/components/searchable-tabs.ts +2 -2
  25. package/src/native/vertical-bars-web-search.ts +80 -0
  26. package/src/native/vertical-bars-web.ts +30 -12
  27. package/src/styles/components/ion-menu.scss +2 -2
  28. package/src/styles/ionic-theme-ios27.scss +2 -0
  29. package/src/styles/utils/searchable.scss +80 -0
  30. package/src/styles/vertical-bars.scss +32 -0
  31. package/src/tab-bar-searchable/dismiss-button.ts +33 -0
  32. package/src/tab-bar-searchable/index.ts +6 -0
package/dist/css/components/ion-menu.css CHANGED
@@ -1 +1 @@
1
- ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled){--side-max-width: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *)){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - 60px - 12px - var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *)):has(:nth-child(5)){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-header ion-toolbar{--padding-start: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + 4px)}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-header ion-toolbar ion-title.title-default{padding-inline-start:calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-content{--padding-start: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-content ion-header ion-toolbar{--padding-start: 4px}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-footer ion-toolbar{--padding-start: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *))[slot=bottom]{inset-inline-start:calc(16px + var(--ion-safe-area-left, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *))[slot=bottom]:dir(rtl){inset-inline-start:calc(16px + var(--ion-safe-area-right, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-header ion-toolbar{--padding-end: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + 4px)}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-header ion-toolbar ion-title.title-default{padding-inline-end:calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-content{--padding-end: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-content ion-header ion-toolbar{--padding-start: 4px}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-footer ion-toolbar{--padding-end: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled){--border: none;--background: rgba(var(--ios-theme-menu-background-rgb), var(--ios-theme-menu-background-opacity, 0.96));--max-width: var(--ios-theme-menu-width, var(--ios26-menu-width));position:absolute;top:0;z-index:999}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-start{inset-inline-start:0}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end{inset-inline-end:0}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled)::part(backdrop){display:none}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled)::part(container){border-radius:0;box-shadow:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list:not(.ios-theme-disabled,.ios26-disabled,.ion-color){background:rgba(0,0,0,0)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item:not(.ios-theme-disabled,.ios26-disabled,.ion-color){--background: transparent}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content{--background: transparent;--ios26-content-box-shadow-rgb: transparent;--ios-theme-content-box-shadow-rgb: var(--ios26-content-box-shadow-rgb)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content::part(scroll){margin-block:calc(var(--ios-theme-floating-safe-area-top, var(--ios26-floating-safe-area-top)) + 6px) var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom));margin-inline:calc(12px + var(--ion-safe-area-left, 0px)) calc(16px + var(--ion-safe-area-right, 0px))}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content:dir(rtl)::part(scroll){margin-inline:calc(12px + var(--ion-safe-area-right, 0px)) calc(16px + var(--ion-safe-area-left, 0px))}
1
+ ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled){--side-max-width: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *)){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - 60px - 12px - var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *)):has(:nth-child(5)){width:calc(100% - (18px + var(--ion-safe-area-left, 0px)) - (18px + var(--ion-safe-area-right, 0px)) - var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-header ion-toolbar{--padding-start: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + 4px)}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-header ion-toolbar ion-title.title-default{padding-inline-start:calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-content{--padding-start: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-content ion-header ion-toolbar{--padding-start: 4px}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-footer ion-toolbar{--padding-start: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + var(--ios-theme-searchable-padding-start, 0px))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *))[slot=bottom]{inset-inline-start:calc(16px + var(--ion-safe-area-left, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.menu-side-start) .split-pane-main ion-tab-bar.ios:not(.ios-theme-disabled,.ios26-disabled):not(:where(.ios-theme-vertical-bars *))[slot=bottom]:dir(rtl){inset-inline-start:calc(16px + var(--ion-safe-area-right, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-header ion-toolbar{--padding-end: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + 4px)}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-header ion-toolbar ion-title.title-default{padding-inline-end:calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-content{--padding-end: var(--ios-theme-menu-width, var(--ios26-menu-width))}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-content ion-header ion-toolbar{--padding-start: 4px}ion-split-pane.ios:not(.ios-theme-disabled,.ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible):has(ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end) .split-pane-main ion-footer ion-toolbar{--padding-end: calc(var(--ios-theme-menu-width, var(--ios26-menu-width)) + var(--ios-theme-searchable-padding-end, 0px))}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled){--border: none;--background: rgba(var(--ios-theme-menu-background-rgb), var(--ios-theme-menu-background-opacity, 0.96));--max-width: var(--ios-theme-menu-width, var(--ios26-menu-width));position:absolute;top:0;z-index:999}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-start{inset-inline-start:0}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled).menu-side-end{inset-inline-end:0}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled)::part(backdrop){display:none}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled)::part(container){border-radius:0;box-shadow:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-list:not(.ios-theme-disabled,.ios26-disabled,.ion-color){background:rgba(0,0,0,0)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-item:not(.ios-theme-disabled,.ios26-disabled,.ion-color){--background: transparent}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content{--background: transparent;--ios26-content-box-shadow-rgb: transparent;--ios-theme-content-box-shadow-rgb: var(--ios26-content-box-shadow-rgb)}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content::part(scroll){margin-block:calc(var(--ios-theme-floating-safe-area-top, var(--ios26-floating-safe-area-top)) + 6px) var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom));margin-inline:calc(12px + var(--ion-safe-area-left, 0px)) calc(16px + var(--ion-safe-area-right, 0px))}ion-menu.ios:not(.ios-theme-disabled,.ios26-disabled) ion-content:dir(rtl)::part(scroll){margin-inline:calc(12px + var(--ion-safe-area-right, 0px)) calc(16px + var(--ion-safe-area-left, 0px))}