@stratakit/structures 0.4.5 → 0.5.1
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.
- package/CHANGELOG.md +74 -0
- package/dist/AccordionItem.d.ts +1 -1
- package/dist/AccordionItem.js +69 -124
- package/dist/Banner.js +149 -120
- package/dist/Chip.js +86 -58
- package/dist/DEV/AccordionItem.js +2 -0
- package/dist/DEV/Banner.js +3 -0
- package/dist/DEV/Chip.js +3 -0
- package/dist/DEV/Dialog.js +2 -0
- package/dist/DEV/DropdownMenu.js +2 -0
- package/dist/DEV/ErrorRegion.js +5 -11
- package/dist/DEV/NavigationList.js +130 -0
- package/dist/DEV/NavigationRail.js +6 -4
- package/dist/DEV/Popover.js +90 -0
- package/dist/DEV/Table.js +3 -0
- package/dist/DEV/Tabs.js +3 -1
- package/dist/DEV/Toolbar.js +2 -0
- package/dist/DEV/Tree.js +2 -0
- package/dist/DEV/TreeItem.js +7 -2
- package/dist/DEV/index.js +4 -0
- package/dist/DEV/styles.css.js +1 -1
- package/dist/DEV/~utils.ListItem.js +3 -3
- package/dist/DEV/~utils.useInit.js +16 -0
- package/dist/Dialog.js +142 -132
- package/dist/DropdownMenu.js +217 -234
- package/dist/ErrorRegion.d.ts +18 -8
- package/dist/ErrorRegion.js +129 -154
- package/dist/NavigationList.d.ts +110 -0
- package/dist/NavigationList.js +130 -0
- package/dist/NavigationRail.js +211 -188
- package/dist/Popover.d.ts +36 -0
- package/dist/Popover.js +99 -0
- package/dist/Table.js +119 -108
- package/dist/Tabs.js +100 -63
- package/dist/Toolbar.js +25 -43
- package/dist/Tree.js +15 -12
- package/dist/TreeItem.js +398 -314
- package/dist/index.d.ts +2 -0
- package/dist/index.js +4 -0
- package/dist/styles.css.js +1 -1
- package/dist/~utils.ListItem.d.ts +3 -3
- package/dist/~utils.ListItem.js +21 -34
- package/dist/~utils.icons.js +26 -46
- package/dist/~utils.useInit.d.ts +8 -0
- package/dist/~utils.useInit.js +13 -0
- package/package.json +25 -18
package/dist/index.d.ts
CHANGED
|
@@ -4,7 +4,9 @@ export { default as Chip } from "./Chip.js";
|
|
|
4
4
|
export * as unstable_Dialog from "./Dialog.js";
|
|
5
5
|
export * as DropdownMenu from "./DropdownMenu.js";
|
|
6
6
|
export * as unstable_ErrorRegion from "./ErrorRegion.js";
|
|
7
|
+
export * as unstable_NavigationList from "./NavigationList.js";
|
|
7
8
|
export * as unstable_NavigationRail from "./NavigationRail.js";
|
|
9
|
+
export { default as unstable_Popover } from "./Popover.js";
|
|
8
10
|
export * as Table from "./Table.js";
|
|
9
11
|
export * as Tabs from "./Tabs.js";
|
|
10
12
|
export * as unstable_Toolbar from "./Toolbar.js";
|
package/dist/index.js
CHANGED
|
@@ -5,7 +5,9 @@ import { default as default3 } from "./Chip.js";
|
|
|
5
5
|
import * as unstable_Dialog from "./Dialog.js";
|
|
6
6
|
import * as DropdownMenu from "./DropdownMenu.js";
|
|
7
7
|
import * as unstable_ErrorRegion from "./ErrorRegion.js";
|
|
8
|
+
import * as unstable_NavigationList from "./NavigationList.js";
|
|
8
9
|
import * as unstable_NavigationRail from "./NavigationRail.js";
|
|
10
|
+
import { default as default4 } from "./Popover.js";
|
|
9
11
|
import * as Table from "./Table.js";
|
|
10
12
|
import * as Tabs from "./Tabs.js";
|
|
11
13
|
import * as unstable_Toolbar from "./Toolbar.js";
|
|
@@ -20,6 +22,8 @@ export {
|
|
|
20
22
|
default2 as unstable_Banner,
|
|
21
23
|
unstable_Dialog,
|
|
22
24
|
unstable_ErrorRegion,
|
|
25
|
+
unstable_NavigationList,
|
|
23
26
|
unstable_NavigationRail,
|
|
27
|
+
default4 as unstable_Popover,
|
|
24
28
|
unstable_Toolbar
|
|
25
29
|
};
|
package/dist/styles.css.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// inline-css:/home/runner/work/design-system/design-system/packages/structures/src/styles.css
|
|
2
|
-
var styles_default = String.raw`@layer itwinui.components{@layer base{.🥝ListItem{cursor:pointer;line-height:1.2;font-size:var(--stratakit-font-size-12);min-block-size:var(--🥝ListItem-height,1.75rem);padding-inline:var(--stratakit-space-x2);background-color:var(--🥝ListItem-background-color);--🥝ListItem-background-color:var(--🌀ListItem-state--default,transparent)var(--🌀ListItem-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀ListItem-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀ListItem-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀ListItem-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)))var(--🌀ListItem-state--disabled,transparent);color:var(--🥝ListItem-color,var(--🌀ListItem-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--active,var(--stratakit-color-text-accent-strong))var(--🌀ListItem-state--active-hover,var(--stratakit-color-text-accent-strong))var(--🌀ListItem-state--disabled,var(--stratakit-color-text-neutral-disabled)));--🥝Icon-color:var(--🌀ListItem-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀ListItem-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀ListItem-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀ListItem-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀ListItem-state--active-hover,var(--stratakit-color-icon-accent-strong))var(--🌀ListItem-state--disabled,var(--stratakit-color-icon-neutral-disabled));grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];align-content:center;align-items:center;display:grid}}@layer states{@media (any-hover:hover){.🥝ListItem:where(:hover){--🌀ListItem-state:var(--🌀ListItem-state--hover)}}.🥝ListItem:where(:active){--🌀ListItem-state:var(--🌀ListItem-state--pressed)}.🥝ListItem:where(:disabled,[aria-disabled=true]){--🌀ListItem-state:var(--🌀ListItem-state--disabled);cursor:not-allowed}}@layer modifiers{.🥝ListItem:where(:has(>:nth-child(2 of .🥝ListItemContent))){--🥝ListItem-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝ListItem{--🌀ListItem-state:var(--🌀ListItem-state--default);--🌀ListItem-state--default:var(--🌀ListItem-state, );--🌀ListItem-state--hover:var(--🌀ListItem-state, );--🌀ListItem-state--pressed:var(--🌀ListItem-state, );--🌀ListItem-state--active:var(--🌀ListItem-state, );--🌀ListItem-state--active-hover:var(--🌀ListItem-state, );--🌀ListItem-state--disabled:var(--🌀ListItem-state, )}}@layer base{.🥝ListItemContent{grid-column:content}}@layer base{.🥝ListItemDecoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:var(--stratakit-space-x1);display:flex}:where(.🥝ListItemContent)~.🥝ListItemDecoration{margin-inline:var(--stratakit-space-x1)0;grid-column:decoration-after}}@media (forced-colors:active){.🥝ListItem:where(:disabled,[aria-disabled=true]){color:graytext}}@layer base{.🥝ChevronDown{rotate:var(--🥝ChevronDown-rotate)}@media (prefers-reduced-motion:no-preference){.🥝ChevronDown{transition:rotate .15s ease-in-out}}}.🥝AccordionItem{--🥝AccordionItem-gap:var(--stratakit-space-x3);--🥝AccordionItem-padding:var(--stratakit-space-x3)}@layer base{.🥝AccordionItem{contain:paint;border-block-end:1px solid var(--stratakit-color-border-neutral-muted);grid-template-rows:[header-start]auto[header-end content-start]auto[content-end];grid-template-columns:[marker-before-start]auto[marker-before-end decoration-before-start]auto[decoration-before-end header-content-start body-content-start]minmax(0,1fr)[header-content-end decoration-after-start]auto[decoration-after-end marker-after-start]auto[marker-after-end body-content-end];display:grid}}@layer states{.🥝AccordionItem:where([data-_sk-open=true]){--🥝ChevronDown-rotate:-.5turn}}@layer base{.🥝AccordionItemHeader{background-color:var(--🥝AccordionItemHeader-background-color);padding:var(--🥝AccordionItem-padding);--🥝AccordionItemHeader-background-color:var(--🌀AccordionItemHeader-state--default,transparent)var(--🌀AccordionItemHeader-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀AccordionItemHeader-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed));grid-area:header/marker-before-start/header/marker-after-end;grid-template-columns:inherit;align-items:center;transition:background-color .15s ease-out;display:grid;position:relative}@supports (grid-template-columns:subgrid){.🥝AccordionItemHeader{grid-template-columns:subgrid}}}@layer states{@media (any-hover:hover){.🥝AccordionItemHeader:where(:hover){--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--hover)}}.🥝AccordionItemHeader:where(:active){--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--pressed)}}@layer base.🌀{.🥝AccordionItemHeader{--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--default);--🌀AccordionItemHeader-state--default:var(--🌀AccordionItemHeader-state, );--🌀AccordionItemHeader-state--hover:var(--🌀AccordionItemHeader-state, );--🌀AccordionItemHeader-state--pressed:var(--🌀AccordionItemHeader-state, )}}@layer base{.🥝AccordionItemMarker{pointer-events:none;grid-area:1/marker-before;margin-inline-start:calc(-1*var(--🥝GhostAligner-inline-offset));margin-inline-end:var(--🥝AccordionItem-gap)}:where(.🥝AccordionItemHeading,.🥝AccordionItemButton)~.🥝AccordionItemMarker{grid-column:marker-after;margin-inline-start:var(--🥝AccordionItem-gap);margin-inline-end:calc(-1*var(--🥝GhostAligner-inline-offset))}}@layer base{.🥝AccordionItemLabel.🥝Text{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-box:cap alphabetic;font-weight:500;display:inline-block}}@layer base{.🥝AccordionItemButton{cursor:pointer;border-radius:var(--stratakit-space-x3);--🥝focus-outline-offset:calc(var(--stratakit-space-x1)*-1);grid-column:header-content}.🥝AccordionItemButton:after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer states{.🥝AccordionItemButton:focus-visible{outline:0!important}.🥝AccordionItemButton:focus-visible:after{outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}}@layer base{.🥝AccordionItemContent{padding-block:var(--🥝AccordionItem-padding);text-box:cap alphabetic;color:var(--stratakit-color-text-neutral-secondary);grid-area:content/body-content}}@layer base{.🥝AccordionItemDecoration{align-items:center;gap:var(--stratakit-space-x1);grid-column:decoration-before;margin-inline-end:var(--🥝AccordionItem-gap);display:flex}:where(.🥝AccordionItemHeading,.🥝AccordionItemButton)~.🥝AccordionItemDecoration{grid-column:decoration-after;margin-inline-start:var(--🥝AccordionItem-gap);margin-inline-end:0}}@layer base{.🥝AccordionItemHeading{text-box:cap alphabetic;grid-column:header-content;margin-block:0}}@layer base{.🥝Banner{background-color:var(--🥝Banner-color-background);border:1px solid var(--🥝Banner-color-border);padding:var(--stratakit-space-x3);border-radius:8px;grid-template-columns:[start]auto[content]minmax(0,1fr)[end]auto;align-items:center;inline-size:100%;display:grid}}@layer modifiers{.🥝Banner:where([data-_sk-variant=outline]){--🥝Banner-color-background:var(--stratakit-color-bg-elevation-base)}.🥝Banner:where([data-_sk-variant=outline]):where([data-_sk-tone=neutral]){--🥝Banner-color-border:var(--stratakit-color-border-neutral-base)}.🥝Banner:where([data-_sk-tone=info]){--🥝Banner-color-border:var(--stratakit-color-border-info-base);--🥝Icon-color:var(--stratakit-color-icon-info-base)}.🥝Banner:where([data-_sk-tone=positive]){--🥝Banner-color-border:var(--stratakit-color-border-positive-base);--🥝Icon-color:var(--stratakit-color-icon-positive-base)}.🥝Banner:where([data-_sk-tone=attention]){--🥝Banner-color-border:var(--stratakit-color-border-attention-base);--🥝Icon-color:var(--stratakit-color-icon-attention-base)}.🥝Banner:where([data-_sk-tone=critical]){--🥝Banner-color-border:var(--stratakit-color-border-critical-base);--🥝Icon-color:var(--stratakit-color-icon-critical-base)}}@layer base{.🥝BannerIcon{grid-area:1/start;align-self:start;margin-inline-end:var(--stratakit-space-x2)}}@layer base{.🥝BannerLabel{grid-column:content;align-self:start;margin-block-end:var(--stratakit-space-x1);font-weight:500}}@layer base{.🥝BannerMessage{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;grid-column:content;overflow:hidden}}@layer base{.🥝BannerActions{justify-self:start;align-items:baseline;gap:var(--stratakit-space-x2);flex-wrap:wrap;grid-column:content;margin-block-start:var(--stratakit-space-x3);display:flex}}@layer base{.🥝BannerDismissButton{grid-area:1/end;align-self:start;margin-inline-start:var(--stratakit-space-x3)}}@media (forced-colors:active){.🥝Banner{--🥝Icon-color:CanvasText}}@layer base{.🥝Chip{isolation:isolate;--🥝Chip-padding-inline:var(--stratakit-space-x2);padding-inline:var(--🥝Chip-padding-inline);border:none;border-radius:9999px;align-items:center;min-block-size:1.5rem;display:inline-flex;position:relative}}.🥝Chip:before{z-index:-1;content:"";border-radius:inherit;border:1px solid var(--stratakit-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝Chip:where([data-_sk-variant=solid]){background-color:var(--stratakit-color-bg-neutral-base)}.🥝Chip:where([data-_sk-variant=outline]){background-color:var(--stratakit-color-bg-page-base)}}@layer base{.🥝ChipLabel:where(button){border-radius:inherit}.🥝ChipLabel:where(button):after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer base{.🥝ChipDismissButton.🥝IconButton{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝Chip-padding-inline));position:relative}}@layer base{.🥝DialogWrapper{block-size:100%;inline-size:100%;display:grid;position:fixed;inset:0}}@layer base{.🥝Dialog{min-block-size:min(100%,var(--🥝Dialog-min-block-size,94px));background-color:var(--stratakit-color-bg-elevation-base);max-block-size:calc(100% - 64px);min-inline-size:min(100%,296px);max-inline-size:calc(100% - 64px);box-shadow:var(--stratakit-shadow-dialog-base);border-radius:12px;flex-direction:column;place-self:center;padding:1px;display:flex;position:relative;overflow:auto}.🥝Dialog:where(:has(.🥝DialogFooter)){--🥝Dialog-min-block-size:156px}.🥝Dialog:where(dialog:modal){inset:0}.🥝Dialog:where(dialog:modal)::backdrop{background-color:#0000}}@layer base{.🥝DialogHeader{padding-block:var(--stratakit-space-x4);padding-inline:var(--stratakit-space-x5);align-items:center;display:flex}}@layer base{.🥝DialogHeading{margin-inline-end:auto}}@layer base{.🥝DialogContent{font-size:var(--stratakit-font-size-12);line-height:1.3333}.🥝DialogContent{color:var(--stratakit-color-text-neutral-primary);padding-block-end:var(--stratakit-space-x5);padding-inline:var(--stratakit-space-x5)}}@layer modifiers{@media (height>=15em){.🥝DialogContent{overflow-block:auto;overflow-y:auto}}}@layer base{.🥝DialogFooter{border-block-start:1px solid var(--stratakit-color-border-page-base);background-color:var(--stratakit-color-bg-page-base);padding-inline:var(--stratakit-space-x5);padding-block:var(--stratakit-space-x5);border-end-end-radius:12px;border-end-start-radius:12px;align-items:center;display:flex}}@layer base{.🥝DialogActionList{gap:var(--stratakit-space-x3);margin-inline-start:auto;display:flex}}@layer base{.🥝DialogBackdrop{opacity:.8;background:var(--stratakit-color-bg-elevation-overlay)}}@media (forced-colors:active){.🥝Dialog{border:1px solid}}@layer base{.🥝DropdownMenu{background-color:var(--stratakit-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);padding:var(--stratakit-space-x1);box-shadow:var(--stratakit-shadow-dropdown-base);border-radius:8px;flex-direction:column;display:flex}}@layer states{.🥝DropdownMenuButton:where([aria-expanded=true]){--🥝DisclosureArrow-rotate:.5turn}}@layer base{.🥝DropdownMenuItem.🥝ListItem{border-radius:4px}}@layer states{.🥝DropdownMenuItem.🥝ListItem:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝DropdownMenuCheckmark-visibility:hidden}.🥝DropdownMenuItem.🥝ListItem:where([data-has-popover-open]:not(:active)){--🌀ListItem-state:var(--🌀ListItem-state--hover)}}@layer base{.🥝DropdownMenuItemDot.🥝Dot{align-self:center}}@layer base{.🥝DropdownMenuCheckmark{visibility:var(--🥝DropdownMenuCheckmark-visibility)}}@layer base{.🥝DropdownMenuItemShortcuts{margin-inline-start:var(--stratakit-space-x2)}}@layer base{.🥝DropdownMenuItemChevron.🥝ListItemDecoration{min-inline-size:var(--🥝Icon-size,1rem);margin-inline-end:-4px}}@media (forced-colors:active){.🥝DropdownMenu{border:1px solid}}@layer base{.🥝ErrorRegion{z-index:1;position:relative}}@layer states{.🥝ErrorRegion:where([data-_sk-expanded=true]){--🥝ChevronDown-rotate:-.5turn;--🥝ErrorRegionHeader-border-end-radius:0}.🥝ErrorRegion:where([data-_sk-visible=true]){padding-inline:var(--stratakit-space-x1);padding-block:var(--stratakit-space-x1);block-size:2.625rem}.🥝ErrorRegion:where([data-_sk-visible=false]){--🥝ErrorRegionContainer-display:none}}@layer base{.🥝ErrorRegionContainer{isolation:isolate;display:var(--🥝ErrorRegionContainer-display,flex);border:1px solid var(--stratakit-color-border-attention-base);background-color:var(--stratakit-color-bg-elevation-base);box-shadow:var(--stratakit-shadow-surface-sm);border-radius:8px;flex-direction:column;position:relative}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionContainer:before{content:"";border-radius:inherit;z-index:-1;position:absolute;inset:0}}}@layer base{.🥝ErrorRegionHeader{min-block-size:2rem;border-start-start-radius:7px;border-start-end-radius:7px;border-end-end-radius:var(--🥝ErrorRegionHeader-border-end-radius,calc(8px - 1px));border-end-start-radius:var(--🥝ErrorRegionHeader-border-end-radius,calc(8px - 1px));flex-wrap:wrap;padding-inline-start:var(--stratakit-space-x2);padding-inline-end:var(--stratakit-space-x1);font-weight:400;transition:border-radius 0s linear .15s}}@layer base{.🥝ErrorRegionIcon{--🥝Icon-color:var(--stratakit-color-icon-attention-base)}}@layer base{.🥝ErrorRegionLabel{text-align:start;overflow-wrap:break-word;flex:1;max-inline-size:100%}}@layer base{.🥝ErrorRegionDialog{transition:max-block-size .15s linear,opacity .15s linear;overflow:hidden}}@layer states{.🥝ErrorRegionDialog:where(:not([data-enter])){opacity:0}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionDialog:where(:not([data-enter])){max-block-size:0}}.🥝ErrorRegionDialog:where([data-enter]){opacity:1}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionDialog:where([data-enter]){max-block-size:calc(348px - 2rem)}@supports (interpolate-size:allow-keywords){.🥝ErrorRegionDialog:where([data-enter]){max-block-size:max-content}}}}@layer base{.🥝ErrorRegionItems{border-block-start:1px solid var(--stratakit-color-border-page-base);max-block-size:calc(348px - 2rem);overflow:auto}}@layer base{.🥝ErrorRegionItem{padding-block:calc(var(--stratakit-space-x1) + var(--stratakit-space-x2));flex-direction:column;padding-inline-start:calc(var(--stratakit-space-x2) + 1rem + var(--stratakit-space-x1));padding-inline-end:var(--stratakit-space-x1);display:flex}.🥝ErrorRegionItem:where(:not(:nth-child(1 of .🥝ErrorRegionItem))){border-block-start:1px solid var(--stratakit-color-border-page-base)}}@layer base{.🥝ErrorRegionItemActions{margin-block-start:var(--stratakit-space-x2)}}@layer base{.🥝NavigationRail{gap:var(--stratakit-space-x1);block-size:100%;min-inline-size:calc(1.5rem + 4*var(--stratakit-space-x2));inline-size:var(--🥝NavigationRail-inline-size);background-color:var(--stratakit-color-bg-page-depth);border-inline-end:1px solid var(--stratakit-color-border-neutral-muted);--🥝Divider-cross-axis-margin:var(--stratakit-space-x1);flex-direction:column;display:inline-flex}}@layer modifiers{.🥝NavigationRail:where([data-_sk-expanded=true]){--🥝NavigationRail-inline-size:256px}}@layer base{.🥝NavigationRailHeader{padding-block:var(--stratakit-space-x2);padding-inline:var(--stratakit-space-x4);align-items:center;min-block-size:56px;display:flex;position:relative}}@layer base{.🥝NavigationRailToggleButton{border:1px solid var(--stratakit-color-border-neutral-muted);background-color:var(--stratakit-color-bg-page-base);block-size:1rem;inline-size:1rem;color:var(--stratakit-color-icon-neutral-base);border-radius:9999px;place-items:center;margin-inline-start:auto;transition:rotate .15s ease-out;display:grid}.🥝NavigationRailToggleButton:before{content:"";border-radius:inherit;block-size:24px;inline-size:24px;position:absolute}}@layer states{@media (any-hover:hover){.🥝NavigationRailToggleButton:where(:hover){border-color:color-mix(in oklch,var(--stratakit-color-border-neutral-muted)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-border-glow-base-hover-\%))}}:where(.🥝NavigationRailHeader:not([data-_sk-expanded=true])) .🥝NavigationRailToggleButton{position:absolute;inset-inline-end:0;translate:50%}.🥝NavigationRailToggleButton:where([aria-expanded=true]){rotate:180deg}}@layer base{.🥝NavigationRailContent{padding-block:var(--stratakit-space-x1);padding-inline:var(--stratakit-space-x2);flex-direction:column;flex:999;display:flex;overflow:auto}}@layer base{.🥝NavigationRailList{flex-direction:column;display:flex}}@layer base{.🥝NavigationRailListItem{flex-shrink:0}}@layer base{.🥝NavigationRailItemAction{font-size:var(--stratakit-font-size-14);line-height:1.4286}.🥝NavigationRailItemAction{align-items:center;gap:var(--stratakit-space-x3);inline-size:-webkit-fill-available;inline-size:-moz-available;inline-size:stretch;min-block-size:calc(1.5rem + 2*var(--stratakit-space-x2));padding:var(--stratakit-space-x2);--🥝Icon-size:1.5rem;background-color:var(--🌀NavigationRailItemAction-state--default,transparent)var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀NavigationRailItemAction-state--disabled,transparent);color:var(--🌀NavigationRailItemAction-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-text-accent-strong))var(--🌀NavigationRailItemAction-state--disabled,var(--stratakit-color-text-neutral-disabled));--🥝Icon-color:var(--🌀NavigationRailItemAction-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀NavigationRailItemAction-state--disabled,var(--stratakit-color-icon-neutral-disabled));border:1px solid;border-color:var(--🌀NavigationRailItemAction-state--default,transparent)var(--🌀NavigationRailItemAction-state--hover,transparent)var(--🌀NavigationRailItemAction-state--pressed,transparent)var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-border-accent-base))var(--🌀NavigationRailItemAction-state--disabled,transparent);-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed);border-radius:4px;text-decoration:none;transition:background-color .15s ease-out;display:inline-flex}}@layer states{@media (any-hover:hover){.🥝NavigationRailItemAction:where(:hover){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--hover)}}.🥝NavigationRailItemAction:where([data-has-popover-open]){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--hover)}.🥝NavigationRailItemAction:where(:active){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--pressed)}.🥝NavigationRailItemAction:where([aria-pressed=true],[aria-current]:not([aria-current=false])){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--active)}.🥝NavigationRailItemAction:where(:disabled,[aria-disabled=true]){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝NavigationRailItemAction{--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--default);--🌀NavigationRailItemAction-state--default:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--hover:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--pressed:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--active:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--disabled:var(--🌀NavigationRailItemAction-state, )}}@layer base{.🥝NavigationRailItemActionLabel{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}@layer base{.🥝NavigationRailFooter{margin-block-start:auto}}@media (forced-colors:active){.🥝NavigationRailItemAction:where([aria-current=page]){forced-color-adjust:none;color:selecteditemtext;background-color:selecteditem;border-color:linktext}}@layer base{.🥝Table:where(table){table-layout:fixed;border-collapse:separate;border-spacing:0;inline-size:100%}}@layer base{.🥝TableHeader{color:var(--stratakit-color-text-neutral-secondary)}}@layer base{.🥝TableRow:where([role=row]){display:flex}}@layer base{.🥝TableCaption,.🥝TableCell{min-block-size:3rem;padding-block:var(--stratakit-space-x2);overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;align-content:center;padding-inline-start:var(--stratakit-space-x4);padding-inline-end:var(--stratakit-space-x3)}:is(.🥝TableCaption,.🥝TableCell):where(th,td){block-size:3rem}}@layer base{.🥝TableCell{background-color:var(--🌀TableCell-state--default,var(--stratakit-color-bg-page-base))var(--🌀TableCell-state--hover,color-mix(in oklch,var(--stratakit-color-bg-page-base)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%)))var(--🌀TableCell-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀TableCell-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)));--🥝TableCell-border-color--active:var(--stratakit-color-border-accent-strong);border-block-end:1px solid var(--🌀TableCell-state--default,var(--stratakit-color-border-neutral-muted))var(--🌀TableCell-state--hover,var(--stratakit-color-border-neutral-muted))var(--🌀TableCell-state--active,var(--🥝TableCell-border-color--active))var(--🌀TableCell-state--active-hover,var(--🥝TableCell-border-color--active));min-inline-size:4rem;position:relative}.🥝TableCell:where(:not(th,td)){column-gap:var(--stratakit-space-x2);flex-grow:1;flex-basis:4rem}.🥝TableCell:where(th){font-weight:inherit}.🥝TableCell:before{content:"";pointer-events:none;border-block-start:1px solid var(--🌀TableCell-state--default,transparent)var(--🌀TableCell-state--hover,transparent)var(--🌀TableCell-state--active,var(--🥝TableCell-border-color--active))var(--🌀TableCell-state--active-hover,var(--🥝TableCell-border-color--active));position:absolute;inset:-1px 0 0}}@layer states{@media (any-hover:hover){.🥝TableCell:where(:hover){--🌀TableCell-state:var(--🌀TableCell-state--hover)}:where(.🥝TableRow:hover) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--hover)}}:where(.🥝TableRow:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--active)}@media (any-hover:hover){:where(.🥝TableRow:hover:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--active-hover)}}}@layer base.🌀{.🥝TableCell{--🌀TableCell-state:var(--🌀TableCell-state--default);--🌀TableCell-state--default:var(--🌀TableCell-state, );--🌀TableCell-state--hover:var(--🌀TableCell-state, );--🌀TableCell-state--active:var(--🌀TableCell-state, );--🌀TableCell-state--active-hover:var(--🌀TableCell-state, )}}@layer base{.🥝TabList{--🥝Tab-active-stripe-gap:var(--stratakit-space-x2);--🥝Tab-active-stripe-size:var(--stratakit-space-x05);--🥝Tab-padding-inline:var(--stratakit-space-x1);gap:var(--stratakit-space-x2);display:flex;position:relative}@supports (position-anchor:--foo){.🥝TabList:after{content:"";position-anchor:--🥝Tab-active-tab;inline-size:calc(anchor-size(inline) - 2*var(--🥝Tab-padding-inline));block-size:var(--🥝Tab-active-stripe-size);background-color:var(--🥝Tab-active-stripe-color);will-change:transform;position:absolute;inset-block-end:calc(anchor(end) - var(--🥝Tab-active-stripe-gap));inset-inline-start:calc(anchor(start) + var(--🥝Tab-padding-inline))}}}@layer modifiers{.🥝TabList[aria-orientation=horizontal]{padding-block-end:var(--🥝Tab-active-stripe-gap)}.🥝TabList:where([data-_sk-tone=neutral]){--🥝Tab-active-stripe-color:var(--stratakit-color-border-neutral-inverse)}.🥝TabList:where([data-_sk-tone=accent]){--🥝Tab-active-stripe-color:var(--stratakit-color-border-accent-strong)}}@layer base{.🥝Tab{font-size:var(--stratakit-font-size-12);color:var(--🥝Tab-color);background-color:var(--🥝Tab-background-color);block-size:1.25rem;padding-inline:var(--🥝Tab-padding-inline);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;align-items:center;gap:var(--stratakit-space-x1);border:none;border-radius:4px;transition:background-color .15s ease-out,color .15s ease-out;display:inline-flex;position:relative}.🥝Tab:before{content:"";inset-inline:0;inset-block:0 calc(var(--🥝Tab-active-stripe-gap)*-1);position:absolute}}@layer modifiers{:where(.🥝TabList[data-_sk-tone=neutral]) .🥝Tab{--🥝Tab-background-color:var(--🌀Tab-state--default,transparent)var(--🌀Tab-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀Tab-state--selected,transparent)var(--🌀Tab-state--disabled,transparent);--🥝Tab-color:var(--🌀Tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀Tab-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀Tab-state--selected,var(--stratakit-color-text-neutral-primary))var(--🌀Tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed)}:where(.🥝TabList[data-_sk-tone=accent]) .🥝Tab{--🥝Tab-background-color:var(--🌀Tab-state--default,transparent)var(--🌀Tab-state--hover,var(--stratakit-color-bg-glow-on-surface-accent-hover))var(--🌀Tab-state--selected,transparent)var(--🌀Tab-state--disabled,transparent);--🥝Tab-color:var(--🌀Tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀Tab-state--hover,var(--stratakit-color-text-accent-strong))var(--🌀Tab-state--selected,var(--stratakit-color-text-accent-strong))var(--🌀Tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-accent-pressed)}}@layer states{.🥝Tab:where([aria-selected=true]){--🌀Tab-state:var(--🌀Tab-state--selected);anchor-name:--🥝Tab-active-tab}@supports not (anchor-name:--foo){.🥝Tab:where([aria-selected=true]):after{content:"";background-color:var(--🥝Tab-active-stripe-color);block-size:var(--🥝Tab-active-stripe-size);inset-inline:var(--🥝Tab-padding-inline);inset-block:auto calc(var(--🥝Tab-active-stripe-gap)*-1);position:absolute}}@media (any-hover:hover){.🥝Tab:where(:hover){--🌀Tab-state:var(--🌀Tab-state--hover)}}.🥝Tab:where(:disabled,[aria-disabled=true]){--🌀Tab-state:var(--🌀Tab-state--disabled);--🥝Tab-active-stripe-color:var(--stratakit-color-border-neutral-disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝Tab{--🌀Tab-state:var(--🌀Tab-state--default);--🌀Tab-state--default:var(--🌀Tab-state, );--🌀Tab-state--hover:var(--🌀Tab-state, );--🌀Tab-state--selected:var(--🌀Tab-state, );--🌀Tab-state--disabled:var(--🌀Tab-state, )}}@layer base{.🥝TabPanel{--🥝focus-outline-offset:calc(var(--stratakit-space-x05)*-1)}.🥝TabPanel:not([data-open]){display:none!important}}@media (forced-colors:active){.🥝TabList,.🥝Tab{--🥝Tab-active-stripe-color:CanvasText}.🥝Tab{--🥝Tab-color:CanvasText}.🥝Tab:where([aria-selected=true]){forced-color-adjust:none;--🥝Tab-background-color:SelectedItem;--🥝Tab-color:SelectedItemText}.🥝Tab:where(:disabled,[aria-disabled=true]){--🥝Tab-color:GrayText}}@layer base{.🥝Toolbar{gap:var(--stratakit-space-x1);background-color:var(--stratakit-color-bg-page-base);box-shadow:var(--stratakit-shadow-toolbar-base);padding:var(--stratakit-space-x1);--🥝Divider-main-axis-margin:var(--stratakit-space-x2);--🥝Divider-cross-axis-margin:var(--stratakit-space-x1);border-radius:8px;align-items:center;display:inline-flex}}@layer modifiers{.🥝Toolbar:where([aria-orientation=vertical]){flex-direction:column}}@layer modifiers{.🥝ToolbarItem.🥝IconButton:where([data-_sk-variant=ghost]){--🥝Button-background-color:var(--🌀Button-state--default,transparent)var(--🌀Button-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀Button-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀Button-state--active,var(--stratakit-color-bg-accent-base))var(--🌀Button-state--disabled,var(--stratakit-color-bg-glow-on-surface-disabled));--🥝Icon-color:var(--🌀Button-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀Button-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀Button-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀Button-state--active,var(--stratakit-color-icon-neutral-emphasis));--🥝Button-border-color:var(--🌀Button-state--default,transparent)var(--🌀Button-state--hover,transparent)var(--🌀Button-state--pressed,transparent)var(--🌀Button-state--active,var(--stratakit-color-border-accent-base))var(--🌀Button-state--disabled,transparent)}.🥝ToolbarItem.🥝IconButton:where([aria-haspopup]:not([aria-haspopup=false])){position:relative}.🥝ToolbarItem.🥝IconButton:where([aria-haspopup]:not([aria-haspopup=false])):after{content:"";background-color:var(--🥝Icon-color);clip-path:polygon(100% 0,100% 100%,0 100%);forced-color-adjust:none;width:3px;height:3px;position:absolute;inset-block-end:4px;inset-inline-end:4px}}@media (forced-colors:active){.🥝Toolbar{border:1px solid}.🥝ToolbarItem.🥝IconButton{--🥝Icon-color:currentColor}}@layer base{.🥝Tree{background-color:var(--stratakit-color-bg-page-base);align-content:start;display:grid;overflow:auto}}@layer base{.🥝TreeItem{min-inline-size:max-content;position:relative}}@layer states{.🥝TreeItem:focus-visible{isolation:isolate;outline:none!important}.🥝TreeItem:focus-visible:before{content:"";z-index:1;pointer-events:none;outline:var(--🥝focus-outline);outline-offset:-1px;position:absolute;inset:0}@media (any-hover:hover){.🥝TreeItem:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝TreeItem-action-visibility:hidden}@supports not selector(:has(+ *)){.🥝TreeItem{--🥝TreeItem-action-visibility:visible}}}}@layer base{.🥝TreeItemNode.🥝ListItem{isolation:isolate;--🥝ListItem-color:var(--🥝TreeItem-color);padding-inline-start:calc(var(--stratakit-space-x2) + calc(var(--stratakit-space-x1) + var(--stratakit-space-x05))*(var(--🥝TreeItem-level) - 1));padding-inline-end:0;position:relative}}@layer modifiers{.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]){--🥝Icon-color:var(--stratakit-color-icon-attention-base);--🥝TreeItem-color:var(--stratakit-color-text-attention-base)}}@layer states{.🥝TreeItemNode.🥝ListItem:where([data-_sk-selected=true]){--🌀ListItem-state:var(--🌀ListItem-state--active)}@media (any-hover:hover){.🥝TreeItemNode.🥝ListItem:where(:hover[data-_sk-selected=true]){--🌀ListItem-state:var(--🌀ListItem-state--active-hover)}}.🥝TreeItemNode.🥝ListItem:where([data-_sk-expanded=false]){--🥝ChevronDown-rotate:-.25turn}.🥝TreeItemNode.🥝ListItem:where(:not([data-_sk-expanded])){--🥝TreeItem-expander-visibility:hidden}}@layer base{.🥝TreeItemContent.🥝ListItemContent{white-space:nowrap}}@layer base{.🥝TreeItemDescription.🥝ListItemContent{color:var(--🥝TreeItem-color,var(--🌀ListItem-state--default,var(--stratakit-color-text-neutral-secondary)))}}@layer base{.🥝TreeItemActionsContainer.🥝ListItemDecoration{background-color:var(--stratakit-color-bg-page-base);visibility:var(--🥝TreeItem-actions-container-visibility,var(--🥝TreeItem-action-visibility));align-self:stretch;padding-inline-end:var(--stratakit-space-x1);display:inline-flex;position:sticky;inset-inline-end:0}.🥝TreeItemActionsContainer.🥝ListItemDecoration:before{content:"";background-color:var(--🥝ListItem-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝TreeItemActionsContainer.🥝ListItemDecoration:where(:has(.🥝TreeItemAction[data-_sk-visible=true])){--🥝TreeItem-actions-container-visibility:visible}}@layer base{.🥝TreeItemAction.🥝IconButton{visibility:var(--🥝TreeItem-action-visibility);transition:visibility 16ms}}@layer modifiers{.🥝TreeItemAction.🥝IconButton:where([data-_sk-visible=false]){--🥝TreeItem-action-visibility:hidden}.🥝TreeItemAction.🥝IconButton:where([data-_sk-visible=true]){--🥝TreeItem-action-visibility:visible}}@layer base{.🥝TreeItemExpander.🥝IconButton{visibility:var(--🥝TreeItem-expander-visibility);z-index:1}}@layer base{.🥝TreeItemDecoration{align-items:center;gap:var(--stratakit-space-x1);display:flex}}@media (forced-colors:active){.🥝TreeItemNode.🥝ListItem{--🥝ListItem-background-color:Canvas;--🥝TreeItem-color:CanvasText}.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true],[data-_sk-selected=true]){forced-color-adjust:none}.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]) .🥝TreeItemContent,.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]) .🥝TreeItemDecoration{color:marktext;background-color:mark}.🥝TreeItemNode.🥝ListItem:where([data-_sk-selected=true]){--🥝ListItem-background-color:SelectedItem;--🥝TreeItem-color:SelectedItemText}}}`;
|
|
2
|
+
var styles_default = String.raw`@layer itwinui.components{@layer base{.🥝ListItem{cursor:pointer;line-height:1.2;font-size:var(--stratakit-font-size-12);min-block-size:var(--🥝ListItem-height,1.75rem);padding-inline:var(--stratakit-space-x2);background-color:var(--🥝ListItem-background-color);--🥝ListItem-background-color:var(--🌀ListItem-state--default,transparent)var(--🌀ListItem-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀ListItem-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀ListItem-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀ListItem-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)))var(--🌀ListItem-state--disabled,transparent);color:var(--🥝ListItem-color,var(--🌀ListItem-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--active,var(--stratakit-color-text-accent-strong))var(--🌀ListItem-state--active-hover,var(--stratakit-color-text-accent-strong))var(--🌀ListItem-state--disabled,var(--stratakit-color-text-neutral-disabled)));--🥝Icon-color:var(--🌀ListItem-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀ListItem-state--hover,var(--stratakit-color-icon-neutral-primary))var(--🌀ListItem-state--pressed,var(--stratakit-color-icon-neutral-primary))var(--🌀ListItem-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀ListItem-state--active-hover,var(--stratakit-color-icon-accent-strong))var(--🌀ListItem-state--disabled,var(--stratakit-color-icon-neutral-disabled));grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];align-content:center;align-items:center;display:grid}}@layer states{@media (any-hover:hover){.🥝ListItem:where(:hover){--🌀ListItem-state:var(--🌀ListItem-state--hover)}}.🥝ListItem:where(:active){--🌀ListItem-state:var(--🌀ListItem-state--pressed)}.🥝ListItem:where(:disabled,[aria-disabled=true]){--🌀ListItem-state:var(--🌀ListItem-state--disabled);cursor:not-allowed}}@layer modifiers{.🥝ListItem:where(:has(>:nth-child(2 of .🥝ListItemContent))){--🥝ListItem-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝ListItem{--🌀ListItem-state:var(--🌀ListItem-state--default);--🌀ListItem-state--default:var(--🌀ListItem-state, );--🌀ListItem-state--hover:var(--🌀ListItem-state, );--🌀ListItem-state--pressed:var(--🌀ListItem-state, );--🌀ListItem-state--active:var(--🌀ListItem-state, );--🌀ListItem-state--active-hover:var(--🌀ListItem-state, );--🌀ListItem-state--disabled:var(--🌀ListItem-state, )}}@layer base{.🥝ListItemContent{grid-column:content}}@layer base{.🥝ListItemDecoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:var(--stratakit-space-x1);display:flex}:where(.🥝ListItemContent)~.🥝ListItemDecoration{margin-inline:var(--stratakit-space-x1)0;grid-column:decoration-after}}@media (forced-colors:active){.🥝ListItem:where(:disabled,[aria-disabled=true]){color:graytext}}@layer base{.🥝ChevronDown{rotate:var(--🥝ChevronDown-rotate)}@media (prefers-reduced-motion:no-preference){.🥝ChevronDown{transition:rotate .15s ease-in-out}}}.🥝AccordionItem{--🥝AccordionItem-gap:var(--stratakit-space-x3);--🥝AccordionItem-padding:var(--stratakit-space-x3)}@layer base{.🥝AccordionItem{contain:paint;border-block-end:1px solid var(--stratakit-color-border-neutral-muted);grid-template-rows:[header-start]auto[header-end content-start]auto[content-end];grid-template-columns:[marker-before-start]auto[marker-before-end decoration-before-start]auto[decoration-before-end header-content-start body-content-start]minmax(0,1fr)[header-content-end decoration-after-start]auto[decoration-after-end marker-after-start]auto[marker-after-end body-content-end];display:grid}}@layer states{.🥝AccordionItem:where([data-_sk-open=true]){--🥝ChevronDown-rotate:-.5turn}}@layer base{.🥝AccordionItemHeader{background-color:var(--🥝AccordionItemHeader-background-color);padding:var(--🥝AccordionItem-padding);--🥝AccordionItemHeader-background-color:var(--🌀AccordionItemHeader-state--default,transparent)var(--🌀AccordionItemHeader-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀AccordionItemHeader-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed));grid-area:header/marker-before-start/header/marker-after-end;grid-template-columns:inherit;align-items:center;transition:background-color .15s ease-out;display:grid;position:relative}@supports (grid-template-columns:subgrid){.🥝AccordionItemHeader{grid-template-columns:subgrid}}}@layer states{@media (any-hover:hover){.🥝AccordionItemHeader:where(:hover){--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--hover)}}.🥝AccordionItemHeader:where(:active){--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--pressed)}}@layer base.🌀{.🥝AccordionItemHeader{--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--default);--🌀AccordionItemHeader-state--default:var(--🌀AccordionItemHeader-state, );--🌀AccordionItemHeader-state--hover:var(--🌀AccordionItemHeader-state, );--🌀AccordionItemHeader-state--pressed:var(--🌀AccordionItemHeader-state, )}}@layer base{.🥝AccordionItemMarker{pointer-events:none;grid-area:1/marker-before;margin-inline-start:calc(-1*var(--🥝GhostAligner-inline-offset));margin-inline-end:var(--🥝AccordionItem-gap)}:where(.🥝AccordionItemHeading,.🥝AccordionItemButton)~.🥝AccordionItemMarker{grid-column:marker-after;margin-inline-start:var(--🥝AccordionItem-gap);margin-inline-end:calc(-1*var(--🥝GhostAligner-inline-offset))}}@layer base{.🥝AccordionItemLabel.🥝Text{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-box:cap alphabetic;font-weight:500;display:inline-block}}@layer base{.🥝AccordionItemButton{cursor:pointer;border-radius:var(--stratakit-space-x3);--🥝focus-outline-offset:calc(var(--stratakit-space-x1)*-1);grid-column:header-content}.🥝AccordionItemButton:after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer states{.🥝AccordionItemButton:focus-visible{outline:0!important}.🥝AccordionItemButton:focus-visible:after{outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}}@layer base{.🥝AccordionItemContent{padding-block:var(--🥝AccordionItem-padding);text-box:cap alphabetic;color:var(--stratakit-color-text-neutral-secondary);grid-area:content/body-content}}@layer base{.🥝AccordionItemDecoration{align-items:center;gap:var(--stratakit-space-x1);grid-column:decoration-before;margin-inline-end:var(--🥝AccordionItem-gap);display:flex}:where(.🥝AccordionItemHeading,.🥝AccordionItemButton)~.🥝AccordionItemDecoration{grid-column:decoration-after;margin-inline-start:var(--🥝AccordionItem-gap);margin-inline-end:0}}@layer base{.🥝AccordionItemHeading{text-box:cap alphabetic;grid-column:header-content;margin-block:0}}@layer base{.🥝Banner{background-color:var(--🥝Banner-color-background);border:1px solid var(--🥝Banner-color-border);padding:var(--stratakit-space-x3);border-radius:8px;grid-template-columns:[start]auto[content]minmax(0,1fr)[end]auto;align-items:center;inline-size:100%;display:grid}}@layer modifiers{.🥝Banner:where([data-_sk-variant=outline]){--🥝Banner-color-background:var(--stratakit-color-bg-elevation-base)}.🥝Banner:where([data-_sk-variant=outline]):where([data-_sk-tone=neutral]){--🥝Banner-color-border:var(--stratakit-color-border-neutral-base)}.🥝Banner:where([data-_sk-tone=info]){--🥝Banner-color-border:var(--stratakit-color-border-info-base);--🥝Icon-color:var(--stratakit-color-icon-info-base)}.🥝Banner:where([data-_sk-tone=positive]){--🥝Banner-color-border:var(--stratakit-color-border-positive-base);--🥝Icon-color:var(--stratakit-color-icon-positive-base)}.🥝Banner:where([data-_sk-tone=attention]){--🥝Banner-color-border:var(--stratakit-color-border-attention-base);--🥝Icon-color:var(--stratakit-color-icon-attention-base)}.🥝Banner:where([data-_sk-tone=critical]){--🥝Banner-color-border:var(--stratakit-color-border-critical-base);--🥝Icon-color:var(--stratakit-color-icon-critical-base)}}@layer base{.🥝BannerIcon{grid-area:1/start;align-self:start;margin-inline-end:var(--stratakit-space-x2)}}@layer base{.🥝BannerLabel{grid-column:content;align-self:start;margin-block-end:var(--stratakit-space-x1);font-weight:500}}@layer base{.🥝BannerMessage{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;grid-column:content;overflow:hidden}}@layer base{.🥝BannerActions{justify-self:start;align-items:baseline;gap:var(--stratakit-space-x2);flex-wrap:wrap;grid-column:content;margin-block-start:var(--stratakit-space-x3);display:flex}}@layer base{.🥝BannerDismissButton{grid-area:1/end;align-self:start;margin-inline-start:var(--stratakit-space-x3)}}@media (forced-colors:active){.🥝Banner{--🥝Icon-color:CanvasText}}@layer base{.🥝Chip{isolation:isolate;--🥝Chip-padding-inline:var(--stratakit-space-x2);padding-inline:var(--🥝Chip-padding-inline);border:none;border-radius:9999px;align-items:center;min-block-size:1.5rem;display:inline-flex;position:relative}}.🥝Chip:before{z-index:-1;content:"";border-radius:inherit;border:1px solid var(--stratakit-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝Chip:where([data-_sk-variant=solid]){background-color:var(--stratakit-color-bg-neutral-base)}.🥝Chip:where([data-_sk-variant=outline]){background-color:var(--stratakit-color-bg-page-base)}}@layer base{.🥝ChipLabel:where(button){border-radius:inherit}.🥝ChipLabel:where(button):after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer base{.🥝ChipDismissButton.🥝IconButton{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝Chip-padding-inline));position:relative}}@layer base{.🥝DialogWrapper{block-size:100%;inline-size:100%;display:grid;position:fixed;inset:0}}@layer base{.🥝Dialog{min-block-size:min(100%,var(--🥝Dialog-min-block-size,94px));background-color:var(--stratakit-color-bg-elevation-base);max-block-size:calc(100% - 64px);min-inline-size:min(100%,296px);max-inline-size:calc(100% - 64px);box-shadow:var(--stratakit-shadow-control-dialog-base);border-radius:12px;flex-direction:column;place-self:center;padding:1px;display:flex;position:relative;overflow:auto}.🥝Dialog:where(:has(.🥝DialogFooter)){--🥝Dialog-min-block-size:156px}.🥝Dialog:where(dialog:modal){inset:0}.🥝Dialog:where(dialog:modal)::backdrop{background-color:#0000}}@layer base{.🥝DialogHeader{padding-block:var(--stratakit-space-x4);padding-inline:var(--stratakit-space-x5);align-items:center;display:flex}}@layer base{.🥝DialogHeading{margin-inline-end:auto}}@layer base{.🥝DialogContent{font-size:var(--stratakit-font-size-12);line-height:1.3333}.🥝DialogContent{color:var(--stratakit-color-text-neutral-primary);padding-block-end:var(--stratakit-space-x5);padding-inline:var(--stratakit-space-x5)}}@layer modifiers{@media (height>=15em){.🥝DialogContent{overflow-block:auto;overflow-y:auto}}}@layer base{.🥝DialogFooter{border-block-start:1px solid var(--stratakit-color-border-page-base);background-color:var(--stratakit-color-bg-page-base);padding-inline:var(--stratakit-space-x5);padding-block:var(--stratakit-space-x5);border-end-end-radius:12px;border-end-start-radius:12px;align-items:center;display:flex}}@layer base{.🥝DialogActionList{gap:var(--stratakit-space-x3);margin-inline-start:auto;display:flex}}@layer base{.🥝DialogBackdrop{opacity:.8;background:var(--stratakit-color-bg-elevation-overlay)}}@media (forced-colors:active){.🥝Dialog{border:1px solid}}@layer base{.🥝DropdownMenu{background-color:var(--stratakit-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);padding:var(--stratakit-space-x1);box-shadow:var(--stratakit-shadow-control-dropdown-base);border-radius:8px;flex-direction:column;display:flex}}@layer states{.🥝DropdownMenuButton:where([aria-expanded=true]){--🥝DisclosureArrow-rotate:.5turn}}@layer base{.🥝DropdownMenuItem.🥝ListItem{border-radius:4px}}@layer states{.🥝DropdownMenuItem.🥝ListItem:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝DropdownMenuCheckmark-visibility:hidden}.🥝DropdownMenuItem.🥝ListItem:where([data-has-popover-open]:not(:active)){--🌀ListItem-state:var(--🌀ListItem-state--hover)}}@layer base{.🥝DropdownMenuItemDot.🥝Dot{align-self:center}}@layer base{.🥝DropdownMenuCheckmark{visibility:var(--🥝DropdownMenuCheckmark-visibility)}}@layer base{.🥝DropdownMenuItemShortcuts{margin-inline-start:var(--stratakit-space-x2)}}@layer base{.🥝DropdownMenuItemChevron.🥝ListItemDecoration{min-inline-size:var(--🥝Icon-size,1rem);margin-inline-end:-4px}}@media (forced-colors:active){.🥝DropdownMenu{border:1px solid}}@layer base{.🥝ErrorRegion{z-index:1;position:relative}}@layer states{.🥝ErrorRegion:where([data-_sk-expanded=true]){--🥝ChevronDown-rotate:-.5turn;--🥝ErrorRegionHeader-border-end-radius:0}.🥝ErrorRegion:where([data-_sk-visible=true]){padding-inline:var(--stratakit-space-x1);padding-block:var(--stratakit-space-x1);block-size:2.625rem}.🥝ErrorRegion:where([data-_sk-visible=false]){--🥝ErrorRegionContainer-display:none}}@layer base{.🥝ErrorRegionContainer{isolation:isolate;display:var(--🥝ErrorRegionContainer-display,flex);border:1px solid var(--stratakit-color-border-attention-base);background-color:var(--stratakit-color-bg-elevation-base);box-shadow:var(--stratakit-shadow-surface-sm);border-radius:8px;flex-direction:column;position:relative}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionContainer:before{content:"";border-radius:inherit;z-index:-1;position:absolute;inset:0}}}@layer base{.🥝ErrorRegionHeader{min-block-size:2rem;border-start-start-radius:7px;border-start-end-radius:7px;border-end-end-radius:var(--🥝ErrorRegionHeader-border-end-radius,calc(8px - 1px));border-end-start-radius:var(--🥝ErrorRegionHeader-border-end-radius,calc(8px - 1px));flex-wrap:wrap;padding-inline-start:var(--stratakit-space-x2);padding-inline-end:var(--stratakit-space-x1);font-weight:400;transition:border-radius 0s linear .15s}}@layer base{.🥝ErrorRegionIcon{--🥝Icon-color:var(--stratakit-color-icon-attention-base)}}@layer base{.🥝ErrorRegionLabel{text-align:start;overflow-wrap:break-word;flex:1;max-inline-size:100%}}@layer base{.🥝ErrorRegionDialog{transition:max-block-size .15s linear,opacity .15s linear;overflow:hidden}}@layer states{.🥝ErrorRegionDialog:where(:not([data-enter])){opacity:0}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionDialog:where(:not([data-enter])){max-block-size:0}}.🥝ErrorRegionDialog:where([data-enter]){opacity:1}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionDialog:where([data-enter]){max-block-size:calc(348px - 2rem)}@supports (interpolate-size:allow-keywords){.🥝ErrorRegionDialog:where([data-enter]){max-block-size:max-content}}}}@layer base{.🥝ErrorRegionItems{border-block-start:1px solid var(--stratakit-color-border-page-base);max-block-size:calc(348px - 2rem);overflow:auto}}@layer base{.🥝ErrorRegionItem{padding-block:calc(var(--stratakit-space-x1) + var(--stratakit-space-x2));flex-direction:column;padding-inline-start:calc(var(--stratakit-space-x2) + 1rem + var(--stratakit-space-x1));padding-inline-end:var(--stratakit-space-x1);display:flex}.🥝ErrorRegionItem:where(:not(:nth-child(1 of .🥝ErrorRegionItem))){border-block-start:1px solid var(--stratakit-color-border-page-base)}}@layer base{.🥝ErrorRegionItemActions{margin-block-start:var(--stratakit-space-x2)}}@layer base{.🥝NavigationListRoot{position:relative}}@layer modifiers{.🥝NavigationListRoot:where([data-_sk-indented]):before{content:"";border-inline-start:1px solid var(--stratakit-color-border-page-base);border-radius:4px;position:absolute;inset-block:0;inset-inline-start:var(--stratakit-space-x4)}}@layer base{.🥝NavigationListItemAction{align-items:center;gap:var(--stratakit-space-x2);min-block-size:2rem;inline-size:-webkit-fill-available;inline-size:-moz-available;inline-size:stretch;padding-inline:var(--stratakit-space-x2);padding-block:var(--stratakit-space-x1);font-size:var(--stratakit-font-size-12);cursor:pointer;color:var(--🌀NavigationListAnchor-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationListAnchor-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationListAnchor-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationListAnchor-state--active,var(--stratakit-color-text-accent-strong))var(--🌀NavigationListAnchor-state--disabled,var(--stratakit-color-text-neutral-disabled));background-color:var(--🌀NavigationListAnchor-state--default,transparent)var(--🌀NavigationListAnchor-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀NavigationListAnchor-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀NavigationListAnchor-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀NavigationListAnchor-state--disabled,transparent);--🥝Icon-color:var(--🌀NavigationListAnchor-state--default,var(--stratakit-color-icon-neutral-secondary))var(--🌀NavigationListAnchor-state--hover,var(---✨icon--hover))var(--🌀NavigationListAnchor-state--pressed,var(--stratakit-color-icon-neutral-primary))var(--🌀NavigationListAnchor-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀NavigationListAnchor-state--disabled,var(--stratakit-color-icon-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed);border-radius:4px;line-height:1.2;text-decoration:none;display:flex;position:relative}}@layer modifiers{:where(.🥝NavigationListItem[data-_sk-indented]) .🥝NavigationListItemAction:before{content:"";inline-size:var(--stratakit-space-x4);display:inline-block}}@layer states{@media (any-hover:hover){.🥝NavigationListItemAction:where(:hover){--🌀NavigationListAnchor-state:var(--🌀NavigationListAnchor-state--hover)}}.🥝NavigationListItemAction:where(:active){--🌀NavigationListAnchor-state:var(--🌀NavigationListAnchor-state--pressed)}.🥝NavigationListItemAction:where([aria-current]:not([aria-current=false])){--🌀NavigationListAnchor-state:var(--🌀NavigationListAnchor-state--active)}.🥝NavigationListItemAction:where([aria-current]:not([aria-current=false])):after{content:"";color:var(--stratakit-color-border-accent-strong);border-radius:inherit;will-change:transform;border:1px solid;position:absolute;inset:0}:where(.🥝NavigationListItem[data-_sk-indented]) .🥝NavigationListItemAction:where([aria-current]:not([aria-current=false])):after{inset:unset;block-size:1rem;inline-size:2px;background-color:currentColor;border:none;inset-inline-start:var(--stratakit-space-x4);transform:translate(-.5px)}.🥝NavigationListItemAction:where(:disabled,[aria-disabled=true]){--🌀NavigationListAnchor-state:var(--🌀NavigationListAnchor-state--disabled);cursor:not-allowed}}@layer base.🌀{.🥝NavigationListItemAction{--🌀NavigationListAnchor-state:var(--🌀NavigationListAnchor-state--default);--🌀NavigationListAnchor-state--default:var(--🌀NavigationListAnchor-state, );--🌀NavigationListAnchor-state--hover:var(--🌀NavigationListAnchor-state, );--🌀NavigationListAnchor-state--pressed:var(--🌀NavigationListAnchor-state, );--🌀NavigationListAnchor-state--active:var(--🌀NavigationListAnchor-state, );--🌀NavigationListAnchor-state--disabled:var(--🌀NavigationListAnchor-state, )}}@layer base{.🥝NavigationListSubgroupChevron{margin-inline-start:auto}}@layer modifiers{:where(.🥝NavigationListSubgroupButton[aria-expanded=true]) .🥝NavigationListSubgroupChevron{--🥝ChevronDown-rotate:180deg}}@media (forced-colors:active){.🥝NavigationListItemAction:where([aria-current]:not([aria-current=false])){forced-color-adjust:none;color:selecteditemtext;background-color:selecteditem}.🥝NavigationListItemAction:where([aria-current]:not([aria-current=false])):after{color:selecteditemtext}.🥝NavigationListItemAction:where(:disabled,[aria-disabled=true]){color:graytext}}@layer base{.🥝NavigationRail{gap:var(--stratakit-space-x1);block-size:100%;min-inline-size:calc(1.5rem + 4*var(--stratakit-space-x2));inline-size:var(--🥝NavigationRail-inline-size);background-color:var(--stratakit-color-bg-page-depth);border-inline-end:1px solid var(--stratakit-color-border-neutral-muted);--🥝Divider-cross-axis-margin:var(--stratakit-space-x1);flex-direction:column;display:inline-flex}}@layer modifiers{.🥝NavigationRail:where([data-_sk-expanded=true]){--🥝NavigationRail-inline-size:256px}}@layer base{.🥝NavigationRailHeader{padding-block:var(--stratakit-space-x2);padding-inline:var(--stratakit-space-x4);align-items:center;min-block-size:56px;display:flex;position:relative}}@layer base{.🥝NavigationRailToggleButton{border:1px solid var(--stratakit-color-border-neutral-muted);background-color:var(--stratakit-color-bg-page-base);block-size:1rem;inline-size:1rem;color:var(--stratakit-color-icon-neutral-base);border-radius:9999px;place-items:center;margin-inline-start:auto;transition:rotate .15s ease-out;display:grid}.🥝NavigationRailToggleButton:before{content:"";border-radius:inherit;block-size:24px;inline-size:24px;position:absolute}}@layer states{@media (any-hover:hover){.🥝NavigationRailToggleButton:where(:hover){border-color:color-mix(in oklch,var(--stratakit-color-border-neutral-muted)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-border-glow-base-hover-\%))}}:where(.🥝NavigationRailHeader:not([data-_sk-expanded=true])) .🥝NavigationRailToggleButton{position:absolute;inset-inline-end:0;translate:50%}.🥝NavigationRailToggleButton:where([aria-expanded=true]){rotate:180deg}}@layer base{.🥝NavigationRailContent{padding-block:var(--stratakit-space-x1);padding-inline:var(--stratakit-space-x2);flex-direction:column;flex:999;display:flex;overflow:auto}}@layer base{.🥝NavigationRailList{flex-direction:column;display:flex}}@layer base{.🥝NavigationRailListItem{flex-shrink:0}}@layer base{.🥝NavigationRailItemAction{font-size:var(--stratakit-font-size-14);line-height:1.4286}.🥝NavigationRailItemAction{align-items:center;gap:var(--stratakit-space-x3);inline-size:-webkit-fill-available;inline-size:-moz-available;inline-size:stretch;min-block-size:calc(1.5rem + 2*var(--stratakit-space-x2));padding:var(--stratakit-space-x2);--🥝Icon-size:1.5rem;background-color:var(--🌀NavigationRailItemAction-state--default,transparent)var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀NavigationRailItemAction-state--disabled,transparent);color:var(--🌀NavigationRailItemAction-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-text-accent-strong))var(--🌀NavigationRailItemAction-state--disabled,var(--stratakit-color-text-neutral-disabled));--🥝Icon-color:var(--🌀NavigationRailItemAction-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-icon-neutral-primary))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-icon-neutral-primary))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀NavigationRailItemAction-state--disabled,var(--stratakit-color-icon-neutral-disabled));border:1px solid;border-color:var(--🌀NavigationRailItemAction-state--default,transparent)var(--🌀NavigationRailItemAction-state--hover,transparent)var(--🌀NavigationRailItemAction-state--pressed,transparent)var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-border-accent-base))var(--🌀NavigationRailItemAction-state--disabled,transparent);-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed);border-radius:4px;text-decoration:none;transition:background-color .15s ease-out;display:inline-flex}}@layer states{@media (any-hover:hover){.🥝NavigationRailItemAction:where(:hover){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--hover)}}.🥝NavigationRailItemAction:where([data-has-popover-open]){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--hover)}.🥝NavigationRailItemAction:where(:active){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--pressed)}.🥝NavigationRailItemAction:where([aria-pressed=true],[aria-current]:not([aria-current=false])){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--active)}.🥝NavigationRailItemAction:where(:disabled,[aria-disabled=true]){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝NavigationRailItemAction{--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--default);--🌀NavigationRailItemAction-state--default:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--hover:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--pressed:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--active:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--disabled:var(--🌀NavigationRailItemAction-state, )}}@layer base{.🥝NavigationRailItemActionLabel{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}@layer base{.🥝NavigationRailFooter{margin-block-start:auto}}@media (forced-colors:active){.🥝NavigationRailItemAction:where([aria-current]:not([aria-current=false])){forced-color-adjust:none;color:selecteditemtext;background-color:selecteditem;border-color:linktext}}@layer base{.🥝Popover{background:var(--stratakit-color-bg-elevation-level-1);box-shadow:var(--stratakit-shadow-control-dropdown-base);min-inline-size:min(95vi,164px);max-inline-size:var(--popover-available-width);max-block-size:var(--popover-available-height);padding:var(--stratakit-space-x1);border-radius:8px;overflow:auto}}@media (forced-colors:active){.🥝Popover{border:1px solid}}@layer base{.🥝Table:where(table){table-layout:fixed;border-collapse:separate;border-spacing:0;inline-size:100%}}@layer base{.🥝TableHeader{color:var(--stratakit-color-text-neutral-secondary)}}@layer base{.🥝TableRow:where([role=row]){display:flex}}@layer base{.🥝TableCaption,.🥝TableCell{min-block-size:3rem;padding-block:var(--stratakit-space-x2);overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;align-content:center;padding-inline-start:var(--stratakit-space-x4);padding-inline-end:var(--stratakit-space-x3)}:is(.🥝TableCaption,.🥝TableCell):where(th,td){block-size:3rem}}@layer base{.🥝TableCell{background-color:var(--🌀TableCell-state--default,var(--stratakit-color-bg-page-base))var(--🌀TableCell-state--hover,color-mix(in oklch,var(--stratakit-color-bg-page-base)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%)))var(--🌀TableCell-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀TableCell-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)));--🥝TableCell-border-color--active:var(--stratakit-color-border-accent-strong);border-block-end:1px solid var(--🌀TableCell-state--default,var(--stratakit-color-border-neutral-muted))var(--🌀TableCell-state--hover,var(--stratakit-color-border-neutral-muted))var(--🌀TableCell-state--active,var(--🥝TableCell-border-color--active))var(--🌀TableCell-state--active-hover,var(--🥝TableCell-border-color--active));min-inline-size:4rem;position:relative}.🥝TableCell:where(:not(th,td)){column-gap:var(--stratakit-space-x2);flex-grow:1;flex-basis:4rem}.🥝TableCell:where(th){font-weight:inherit}.🥝TableCell:before{content:"";pointer-events:none;border-block-start:1px solid var(--🌀TableCell-state--default,transparent)var(--🌀TableCell-state--hover,transparent)var(--🌀TableCell-state--active,var(--🥝TableCell-border-color--active))var(--🌀TableCell-state--active-hover,var(--🥝TableCell-border-color--active));position:absolute;inset:-1px 0 0}}@layer states{@media (any-hover:hover){.🥝TableCell:where(:hover){--🌀TableCell-state:var(--🌀TableCell-state--hover)}:where(.🥝TableRow:hover) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--hover)}}:where(.🥝TableRow:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--active)}@media (any-hover:hover){:where(.🥝TableRow:hover:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--active-hover)}}}@layer base.🌀{.🥝TableCell{--🌀TableCell-state:var(--🌀TableCell-state--default);--🌀TableCell-state--default:var(--🌀TableCell-state, );--🌀TableCell-state--hover:var(--🌀TableCell-state, );--🌀TableCell-state--active:var(--🌀TableCell-state, );--🌀TableCell-state--active-hover:var(--🌀TableCell-state, )}}@layer base{.🥝TabList{--🥝Tab-active-stripe-gap:var(--stratakit-space-x2);--🥝Tab-active-stripe-size:var(--stratakit-space-x05);--🥝Tab-padding-inline:var(--stratakit-space-x1);gap:var(--stratakit-space-x2);display:flex;position:relative}@supports (position-anchor:--foo){.🥝TabList:after{content:"";position-anchor:--🥝Tab-active-tab;inline-size:calc(anchor-size(inline) - 2*var(--🥝Tab-padding-inline));block-size:var(--🥝Tab-active-stripe-size);background-color:var(--🥝Tab-active-stripe-color);will-change:transform;position:absolute;inset-block-end:calc(anchor(end) - var(--🥝Tab-active-stripe-gap));inset-inline-start:calc(anchor(start) + var(--🥝Tab-padding-inline))}}}@layer modifiers{.🥝TabList[aria-orientation=horizontal]{padding-block-end:var(--🥝Tab-active-stripe-gap)}.🥝TabList:where([data-_sk-tone=neutral]){--🥝Tab-active-stripe-color:var(--stratakit-color-border-neutral-inverse)}.🥝TabList:where([data-_sk-tone=accent]){--🥝Tab-active-stripe-color:var(--stratakit-color-border-accent-strong)}}@layer base{.🥝Tab{font-size:var(--stratakit-font-size-12);color:var(--🥝Tab-color);background-color:var(--🥝Tab-background-color);block-size:1.25rem;padding-inline:var(--🥝Tab-padding-inline);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;align-items:center;gap:var(--stratakit-space-x1);border:none;border-radius:4px;transition:background-color .15s ease-out,color .15s ease-out;display:inline-flex;position:relative}.🥝Tab:before{content:"";inset-inline:0;inset-block:0 calc(var(--🥝Tab-active-stripe-gap)*-1);position:absolute}}@layer modifiers{:where(.🥝TabList[data-_sk-tone=neutral]) .🥝Tab{--🥝Tab-background-color:var(--🌀Tab-state--default,transparent)var(--🌀Tab-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀Tab-state--selected,transparent)var(--🌀Tab-state--disabled,transparent);--🥝Tab-color:var(--🌀Tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀Tab-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀Tab-state--selected,var(--stratakit-color-text-neutral-primary))var(--🌀Tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed)}:where(.🥝TabList[data-_sk-tone=accent]) .🥝Tab{--🥝Tab-background-color:var(--🌀Tab-state--default,transparent)var(--🌀Tab-state--hover,var(--stratakit-color-bg-glow-on-surface-accent-hover))var(--🌀Tab-state--selected,transparent)var(--🌀Tab-state--disabled,transparent);--🥝Tab-color:var(--🌀Tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀Tab-state--hover,var(--stratakit-color-text-accent-strong))var(--🌀Tab-state--selected,var(--stratakit-color-text-accent-strong))var(--🌀Tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-accent-pressed)}}@layer states{.🥝Tab:where([aria-selected=true]){--🌀Tab-state:var(--🌀Tab-state--selected);anchor-name:--🥝Tab-active-tab}@supports not (anchor-name:--foo){.🥝Tab:where([aria-selected=true]):after{content:"";background-color:var(--🥝Tab-active-stripe-color);block-size:var(--🥝Tab-active-stripe-size);inset-inline:var(--🥝Tab-padding-inline);inset-block:auto calc(var(--🥝Tab-active-stripe-gap)*-1);position:absolute}}@media (any-hover:hover){.🥝Tab:where(:hover){--🌀Tab-state:var(--🌀Tab-state--hover)}}.🥝Tab:where(:disabled,[aria-disabled=true]){--🌀Tab-state:var(--🌀Tab-state--disabled);--🥝Tab-active-stripe-color:var(--stratakit-color-border-neutral-disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝Tab{--🌀Tab-state:var(--🌀Tab-state--default);--🌀Tab-state--default:var(--🌀Tab-state, );--🌀Tab-state--hover:var(--🌀Tab-state, );--🌀Tab-state--selected:var(--🌀Tab-state, );--🌀Tab-state--disabled:var(--🌀Tab-state, )}}@layer base{.🥝TabPanel{--🥝focus-outline-offset:calc(var(--stratakit-space-x05)*-1)}.🥝TabPanel:not([data-open]){display:none!important}}@media (forced-colors:active){.🥝TabList,.🥝Tab{--🥝Tab-active-stripe-color:CanvasText}.🥝Tab{--🥝Tab-color:CanvasText}.🥝Tab:where([aria-selected=true]){forced-color-adjust:none;--🥝Tab-background-color:SelectedItem;--🥝Tab-color:SelectedItemText}.🥝Tab:where(:disabled,[aria-disabled=true]){--🥝Tab-color:GrayText}}@layer base{.🥝Toolbar{gap:var(--stratakit-space-x1);background-color:var(--stratakit-color-bg-page-base);box-shadow:var(--stratakit-shadow-control-toolbar-base);padding:var(--stratakit-space-x1);--🥝Divider-main-axis-margin:var(--stratakit-space-x2);--🥝Divider-cross-axis-margin:var(--stratakit-space-x1);border-radius:8px;align-items:center;display:inline-flex}}@layer modifiers{.🥝Toolbar:where([aria-orientation=vertical]){flex-direction:column}}@layer modifiers{.🥝ToolbarItem.🥝IconButton:where([data-_sk-variant=ghost]){--🥝Button-background-color:var(--🌀Button-state--default,transparent)var(--🌀Button-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀Button-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀Button-state--active,var(--stratakit-color-bg-accent-base))var(--🌀Button-state--disabled,var(--stratakit-color-bg-glow-on-surface-disabled));--🥝Icon-color:var(--🌀Button-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀Button-state--hover,var(--stratakit-color-icon-neutral-primary))var(--🌀Button-state--pressed,var(--stratakit-color-icon-neutral-primary))var(--🌀Button-state--active,var(--stratakit-color-icon-neutral-emphasis));--🥝Button-border-color:var(--🌀Button-state--default,transparent)var(--🌀Button-state--hover,transparent)var(--🌀Button-state--pressed,transparent)var(--🌀Button-state--active,var(--stratakit-color-border-accent-base))var(--🌀Button-state--disabled,transparent)}.🥝ToolbarItem.🥝IconButton:where([aria-haspopup]:not([aria-haspopup=false])){position:relative}.🥝ToolbarItem.🥝IconButton:where([aria-haspopup]:not([aria-haspopup=false])):after{content:"";background-color:var(--🥝Icon-color);clip-path:polygon(100% 0,100% 100%,0 100%);forced-color-adjust:none;width:3px;height:3px;position:absolute;inset-block-end:4px;inset-inline-end:4px}}@media (forced-colors:active){.🥝Toolbar{border:1px solid}.🥝ToolbarItem.🥝IconButton{--🥝Icon-color:currentColor}}@layer base{.🥝Tree{background-color:var(--stratakit-color-bg-page-base);align-content:start;display:grid;overflow:auto}}@layer base{.🥝TreeItem{min-inline-size:max-content;position:relative}}@layer states{.🥝TreeItem:focus-visible{isolation:isolate;outline:none!important}.🥝TreeItem:focus-visible:before{content:"";z-index:1;pointer-events:none;outline:var(--🥝focus-outline);outline-offset:-1px;position:absolute;inset:0}@media (any-hover:hover){.🥝TreeItem:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝TreeItem-action-visibility:hidden}@supports not selector(:has(+ *)){.🥝TreeItem{--🥝TreeItem-action-visibility:visible}}}}@layer base{.🥝TreeItemNode.🥝ListItem{isolation:isolate;--🥝ListItem-color:var(--🥝TreeItem-color);padding-inline-start:calc(var(--stratakit-space-x2) + calc(var(--stratakit-space-x1) + var(--stratakit-space-x05))*(var(--🥝TreeItem-level) - 1));padding-inline-end:0;position:relative}}@layer modifiers{.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]){--🥝Icon-color:var(--stratakit-color-icon-attention-base);--🥝TreeItem-color:var(--stratakit-color-text-attention-base)}}@layer states{.🥝TreeItemNode.🥝ListItem:where([data-_sk-selected=true]){--🌀ListItem-state:var(--🌀ListItem-state--active)}@media (any-hover:hover){.🥝TreeItemNode.🥝ListItem:where(:hover[data-_sk-selected=true]){--🌀ListItem-state:var(--🌀ListItem-state--active-hover)}}.🥝TreeItemNode.🥝ListItem:where([data-_sk-expanded=false]){--🥝ChevronDown-rotate:-.25turn}.🥝TreeItemNode.🥝ListItem:where(:not([data-_sk-expanded])){--🥝TreeItem-expander-visibility:hidden}}@layer base{.🥝TreeItemContent.🥝ListItemContent{white-space:nowrap}}@layer base{.🥝TreeItemDescription.🥝ListItemContent{color:var(--🥝TreeItem-color,var(--🌀ListItem-state--default,var(--stratakit-color-text-neutral-secondary)))}}@layer base{.🥝TreeItemActionsContainer.🥝ListItemDecoration{background-color:var(--stratakit-color-bg-page-base);visibility:var(--🥝TreeItem-actions-container-visibility,var(--🥝TreeItem-action-visibility));align-self:stretch;padding-inline-end:var(--stratakit-space-x1);display:inline-flex;position:sticky;inset-inline-end:0}.🥝TreeItemActionsContainer.🥝ListItemDecoration:before{content:"";background-color:var(--🥝ListItem-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝TreeItemActionsContainer.🥝ListItemDecoration:where(:has(.🥝TreeItemAction[data-_sk-visible=true])){--🥝TreeItem-actions-container-visibility:visible}}@layer base{.🥝TreeItemAction.🥝IconButton{visibility:var(--🥝TreeItem-action-visibility);transition:visibility 16ms}}@layer modifiers{.🥝TreeItemAction.🥝IconButton:where([data-_sk-visible=false]){--🥝TreeItem-action-visibility:hidden}.🥝TreeItemAction.🥝IconButton:where([data-_sk-visible=true]){--🥝TreeItem-action-visibility:visible}}@layer base{.🥝TreeItemExpander.🥝IconButton{visibility:var(--🥝TreeItem-expander-visibility);z-index:1}}@layer base{.🥝TreeItemDecoration{align-items:center;gap:var(--stratakit-space-x1);display:flex}}@media (forced-colors:active){.🥝TreeItemNode.🥝ListItem{--🥝ListItem-background-color:Canvas;--🥝TreeItem-color:CanvasText}.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true],[data-_sk-selected=true]){forced-color-adjust:none}.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]) .🥝TreeItemContent,.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]) .🥝TreeItemDecoration{color:marktext;background-color:mark}.🥝TreeItemNode.🥝ListItem:where([data-_sk-selected=true]){--🥝ListItem-background-color:SelectedItem;--🥝TreeItem-color:SelectedItemText}}}`;
|
|
3
3
|
|
|
4
4
|
// src/styles.css.ts
|
|
5
5
|
var styles_css_default = styles_default;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import type { RoleProps } from "@ariakit/react/role";
|
|
2
2
|
interface ListItemProps extends RoleProps<"div"> {
|
|
3
3
|
}
|
|
4
|
-
/** @
|
|
4
|
+
/** @private */
|
|
5
5
|
declare const ListItem: import("react").ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
|
|
6
6
|
interface ListItemContentProps extends RoleProps<"div"> {
|
|
7
7
|
}
|
|
8
|
-
/** @
|
|
8
|
+
/** @private */
|
|
9
9
|
declare const ListItemContent: import("react").ForwardRefExoticComponent<Omit<ListItemContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
|
|
10
10
|
interface ListItemDecorationProps extends RoleProps<"div"> {
|
|
11
11
|
}
|
|
12
|
-
/** @
|
|
12
|
+
/** @private */
|
|
13
13
|
declare const ListItemDecoration: import("react").ForwardRefExoticComponent<Omit<ListItemDecorationProps, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
|
|
14
14
|
export { ListItem as Root, ListItemContent as Content, ListItemDecoration as Decoration, };
|
package/dist/~utils.ListItem.js
CHANGED
|
@@ -4,41 +4,28 @@ import { Text } from "@stratakit/bricks";
|
|
|
4
4
|
import { forwardRef } from "@stratakit/foundations/secret-internals";
|
|
5
5
|
import cx from "classnames";
|
|
6
6
|
const ListItem = forwardRef((props, forwardedRef) => {
|
|
7
|
-
return /* @__PURE__ */ jsx(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
7
|
+
return /* @__PURE__ */ jsx(Role.div, {
|
|
8
|
+
role: "listitem",
|
|
9
|
+
...props,
|
|
10
|
+
className: cx("\u{1F95D}ListItem", props.className),
|
|
11
|
+
ref: forwardedRef
|
|
12
|
+
});
|
|
13
|
+
});
|
|
14
|
+
const ListItemContent = forwardRef((props, forwardedRef) => {
|
|
15
|
+
return /* @__PURE__ */ jsx(Text, {
|
|
16
|
+
...props,
|
|
17
|
+
variant: "body-sm",
|
|
18
|
+
className: cx("\u{1F95D}ListItemContent", props.className),
|
|
19
|
+
ref: forwardedRef
|
|
20
|
+
});
|
|
21
|
+
});
|
|
22
|
+
const ListItemDecoration = forwardRef((props, forwardedRef) => {
|
|
23
|
+
return /* @__PURE__ */ jsx(Role.div, {
|
|
24
|
+
...props,
|
|
25
|
+
className: cx("\u{1F95D}ListItemDecoration", props.className),
|
|
26
|
+
ref: forwardedRef
|
|
27
|
+
});
|
|
16
28
|
});
|
|
17
|
-
const ListItemContent = forwardRef(
|
|
18
|
-
(props, forwardedRef) => {
|
|
19
|
-
return /* @__PURE__ */ jsx(
|
|
20
|
-
Text,
|
|
21
|
-
{
|
|
22
|
-
...props,
|
|
23
|
-
variant: "body-sm",
|
|
24
|
-
className: cx("\u{1F95D}ListItemContent", props.className),
|
|
25
|
-
ref: forwardedRef
|
|
26
|
-
}
|
|
27
|
-
);
|
|
28
|
-
}
|
|
29
|
-
);
|
|
30
|
-
const ListItemDecoration = forwardRef(
|
|
31
|
-
(props, forwardedRef) => {
|
|
32
|
-
return /* @__PURE__ */ jsx(
|
|
33
|
-
Role.div,
|
|
34
|
-
{
|
|
35
|
-
...props,
|
|
36
|
-
className: cx("\u{1F95D}ListItemDecoration", props.className),
|
|
37
|
-
ref: forwardedRef
|
|
38
|
-
}
|
|
39
|
-
);
|
|
40
|
-
}
|
|
41
|
-
);
|
|
42
29
|
export {
|
|
43
30
|
ListItemContent as Content,
|
|
44
31
|
ListItemDecoration as Decoration,
|
package/dist/~utils.icons.js
CHANGED
|
@@ -1,55 +1,35 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
createIconFromPath,
|
|
4
|
-
forwardRef
|
|
5
|
-
} from "@stratakit/foundations/secret-internals";
|
|
2
|
+
import { createIconFromPath, forwardRef } from "@stratakit/foundations/secret-internals";
|
|
6
3
|
import cx from "classnames";
|
|
7
|
-
const Checkmark = createIconFromPath(
|
|
8
|
-
|
|
9
|
-
);
|
|
10
|
-
const Dismiss = createIconFromPath(
|
|
11
|
-
"M4.854 4.146a.5.5 0 1 0-.708.708L7.293 8l-3.147 3.146a.5.5 0 1 0 .708.707L8 8.707l3.146 3.146a.5.5 0 1 0 .707-.707L8.707 8l3.146-3.146a.5.5 0 1 0-.707-.708L8 7.293 4.854 4.146Z"
|
|
12
|
-
);
|
|
4
|
+
const Checkmark = createIconFromPath("M11.607 4.191a.5.5 0 0 1 .787.617l-5.5 7a.503.503 0 0 1-.777.012l-2.5-3-.057-.084a.5.5 0 0 1 .752-.627l.072.07 2.105 2.526 5.118-6.514Z");
|
|
5
|
+
const Dismiss = createIconFromPath("M4.854 4.146a.5.5 0 1 0-.708.708L7.293 8l-3.147 3.146a.5.5 0 1 0 .708.707L8 8.707l3.146 3.146a.5.5 0 1 0 .707-.707L8.707 8l3.146-3.146a.5.5 0 1 0-.707-.708L8 7.293 4.854 4.146Z");
|
|
13
6
|
const statusIcons = {
|
|
14
|
-
positive: createIconFromPath(
|
|
15
|
-
|
|
16
|
-
),
|
|
17
|
-
|
|
18
|
-
"M8 12.75a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5ZM6.68 2.885c.568-1.047 2.072-1.047 2.64 0l4.82 8.9A1.5 1.5 0 0 1 12.82 14H10.5v-1h2.321a.5.5 0 0 0 .44-.738l-4.822-8.9a.5.5 0 0 0-.879 0l-4.821 8.9a.5.5 0 0 0 .44.738h2.32v1H3.18a1.5 1.5 0 0 1-1.319-2.215l4.82-8.9ZM8 6.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5Z"
|
|
19
|
-
),
|
|
20
|
-
critical: createIconFromPath(
|
|
21
|
-
"M8 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm0 1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM8 10a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Zm0-5.5a.5.5 0 0 1 .5.5v3.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"
|
|
22
|
-
),
|
|
23
|
-
info: createIconFromPath(
|
|
24
|
-
"M8 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm0 1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Zm0 4a.5.5 0 0 1 .5.5v3.5h1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h1v-3h-1a.5.5 0 0 1 0-1H8Zm-.125-2.25a.625.625 0 1 1 0 1.25.625.625 0 0 1 0-1.25Z"
|
|
25
|
-
)
|
|
7
|
+
positive: createIconFromPath("M7.25 1.855a1.5 1.5 0 0 1 1.5 0l4.196 2.423a1.5 1.5 0 0 1 .75 1.299v4.846a1.5 1.5 0 0 1-.75 1.298L8.75 14.144a1.5 1.5 0 0 1-1.5 0l-4.196-2.423a1.5 1.5 0 0 1-.75-1.298V5.577a1.5 1.5 0 0 1 .75-1.299L7.25 1.855Zm1 .866a.5.5 0 0 0-.5 0L3.554 5.144a.5.5 0 0 0-.25.433v4.846a.5.5 0 0 0 .25.432l4.196 2.423a.5.5 0 0 0 .5 0l4.196-2.423a.5.5 0 0 0 .25-.432V5.577a.5.5 0 0 0-.25-.433L8.25 2.721ZM9.85 5.7a.501.501 0 0 1 .8.6l-3 4a.502.502 0 0 1-.754.053l-1.5-1.5-.064-.078a.5.5 0 0 1 .693-.693l.079.064 1.091 1.092L9.85 5.7Z"),
|
|
8
|
+
attention: createIconFromPath("M8 12.75a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5ZM6.68 2.885c.568-1.047 2.072-1.047 2.64 0l4.82 8.9A1.5 1.5 0 0 1 12.82 14H10.5v-1h2.321a.5.5 0 0 0 .44-.738l-4.822-8.9a.5.5 0 0 0-.879 0l-4.821 8.9a.5.5 0 0 0 .44.738h2.32v1H3.18a1.5 1.5 0 0 1-1.319-2.215l4.82-8.9ZM8 6.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5Z"),
|
|
9
|
+
critical: createIconFromPath("M8 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm0 1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM8 10a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Zm0-5.5a.5.5 0 0 1 .5.5v3.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"),
|
|
10
|
+
info: createIconFromPath("M8 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm0 1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Zm0 4a.5.5 0 0 1 .5.5v3.5h1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h1v-3h-1a.5.5 0 0 1 0-1H8Zm-.125-2.25a.625.625 0 1 1 0 1.25.625.625 0 0 1 0-1.25Z")
|
|
26
11
|
};
|
|
27
|
-
const StatusIcon = forwardRef(
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
);
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
);
|
|
12
|
+
const StatusIcon = forwardRef((props, forwardedRef) => {
|
|
13
|
+
const {
|
|
14
|
+
tone,
|
|
15
|
+
...rest
|
|
16
|
+
} = props;
|
|
17
|
+
const Element = statusIcons[tone];
|
|
18
|
+
return /* @__PURE__ */ jsx(Element, {
|
|
19
|
+
...rest,
|
|
20
|
+
ref: forwardedRef
|
|
21
|
+
});
|
|
22
|
+
});
|
|
23
|
+
const MoreHorizontal = createIconFromPath("M4 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z");
|
|
24
|
+
const ChevronDownBase = createIconFromPath("M11.146 6.146a.5.5 0 1 1 .707.708l-3.5 3.5a.5.5 0 0 1-.707 0l-3.5-3.5a.5.5 0 1 1 .708-.708L8 9.293l3.146-3.147Z");
|
|
40
25
|
const ChevronDown = forwardRef((props, forwardedRef) => {
|
|
41
|
-
return /* @__PURE__ */ jsx(
|
|
42
|
-
|
|
43
|
-
{
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
ref: forwardedRef
|
|
47
|
-
}
|
|
48
|
-
);
|
|
26
|
+
return /* @__PURE__ */ jsx(ChevronDownBase, {
|
|
27
|
+
...props,
|
|
28
|
+
className: cx("\u{1F95D}ChevronDown", props.className),
|
|
29
|
+
ref: forwardedRef
|
|
30
|
+
});
|
|
49
31
|
});
|
|
50
|
-
const ChevronRight = createIconFromPath(
|
|
51
|
-
"M6.146 4.146a.5.5 0 0 1 .708 0l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 1 1-.708-.707L9.293 8 6.146 4.854a.5.5 0 0 1 0-.708Z"
|
|
52
|
-
);
|
|
32
|
+
const ChevronRight = createIconFromPath("M6.146 4.146a.5.5 0 0 1 .708 0l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 1 1-.708-.707L9.293 8 6.146 4.854a.5.5 0 0 1 0-.708Z");
|
|
53
33
|
export {
|
|
54
34
|
Checkmark,
|
|
55
35
|
ChevronDown,
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { RootContext } from "@stratakit/foundations/secret-internals";
|
|
3
|
+
const packageName = "@stratakit/structures";
|
|
4
|
+
function useInit() {
|
|
5
|
+
const rootContext = React.useContext(RootContext);
|
|
6
|
+
if (!rootContext) {
|
|
7
|
+
} else {
|
|
8
|
+
rootContext.versions?.set(packageName, "0.5.1");
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
export {
|
|
12
|
+
useInit
|
|
13
|
+
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stratakit/structures",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.5.1",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -49,12 +49,24 @@
|
|
|
49
49
|
"development": "./dist/DEV/ErrorRegion.js",
|
|
50
50
|
"default": "./dist/ErrorRegion.js"
|
|
51
51
|
},
|
|
52
|
+
"./unstable_NavigationList": {
|
|
53
|
+
"@stratakit/source": "./src/NavigationList.tsx",
|
|
54
|
+
"types": "./dist/NavigationList.d.ts",
|
|
55
|
+
"development": "./dist/DEV/NavigationList.js",
|
|
56
|
+
"default": "./dist/NavigationList.js"
|
|
57
|
+
},
|
|
52
58
|
"./unstable_NavigationRail": {
|
|
53
59
|
"@stratakit/source": "./src/NavigationRail.tsx",
|
|
54
60
|
"types": "./dist/NavigationRail.d.ts",
|
|
55
61
|
"development": "./dist/DEV/NavigationRail.js",
|
|
56
62
|
"default": "./dist/NavigationRail.js"
|
|
57
63
|
},
|
|
64
|
+
"./unstable_Popover": {
|
|
65
|
+
"@stratakit/source": "./src/Popover.tsx",
|
|
66
|
+
"types": "./dist/Popover.d.ts",
|
|
67
|
+
"development": "./dist/DEV/Popover.js",
|
|
68
|
+
"default": "./dist/Popover.js"
|
|
69
|
+
},
|
|
58
70
|
"./Table": {
|
|
59
71
|
"@stratakit/source": "./src/Table.tsx",
|
|
60
72
|
"types": "./dist/Table.d.ts",
|
|
@@ -78,12 +90,6 @@
|
|
|
78
90
|
"types": "./dist/Tree.d.ts",
|
|
79
91
|
"development": "./dist/DEV/Tree.js",
|
|
80
92
|
"default": "./dist/Tree.js"
|
|
81
|
-
},
|
|
82
|
-
"./TreeItem": {
|
|
83
|
-
"@stratakit/source": "./src/TreeItem.tsx",
|
|
84
|
-
"types": "./dist/TreeItem.d.ts",
|
|
85
|
-
"development": "./dist/DEV/TreeItem.js",
|
|
86
|
-
"default": "./dist/TreeItem.js"
|
|
87
93
|
}
|
|
88
94
|
},
|
|
89
95
|
"files": [
|
|
@@ -113,23 +119,24 @@
|
|
|
113
119
|
"ui"
|
|
114
120
|
],
|
|
115
121
|
"dependencies": {
|
|
116
|
-
"@ariakit/react": "^0.4.
|
|
117
|
-
"@stratakit/bricks": "^0.
|
|
122
|
+
"@ariakit/react": "^0.4.19",
|
|
123
|
+
"@stratakit/bricks": "^0.5.1",
|
|
118
124
|
"classnames": "^2.5.1",
|
|
125
|
+
"react-compiler-runtime": "^1.0.0",
|
|
119
126
|
"zustand": "^5.0.8"
|
|
120
127
|
},
|
|
121
128
|
"devDependencies": {
|
|
122
|
-
"@types/node": "^22.
|
|
123
|
-
"@types/react": "^19.
|
|
124
|
-
"@types/react-dom": "^19.
|
|
125
|
-
"esbuild": "^0.25.
|
|
126
|
-
"react": "^19.
|
|
127
|
-
"react-dom": "^19.
|
|
128
|
-
"typescript": "~5.9.
|
|
129
|
-
"@stratakit/foundations": "0.
|
|
129
|
+
"@types/node": "^22.19.0",
|
|
130
|
+
"@types/react": "^19.2.2",
|
|
131
|
+
"@types/react-dom": "^19.2.2",
|
|
132
|
+
"esbuild": "^0.25.11",
|
|
133
|
+
"react": "^19.2.0",
|
|
134
|
+
"react-dom": "^19.2.0",
|
|
135
|
+
"typescript": "~5.9.3",
|
|
136
|
+
"@stratakit/foundations": "0.4.1"
|
|
130
137
|
},
|
|
131
138
|
"peerDependencies": {
|
|
132
|
-
"@stratakit/foundations": "^0.
|
|
139
|
+
"@stratakit/foundations": "^0.4.1",
|
|
133
140
|
"react": ">=18.0.0",
|
|
134
141
|
"react-dom": ">=18.0.0"
|
|
135
142
|
},
|