@askrjs/themes 0.2.2 → 0.2.3
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/THEMING.md +22 -1
- package/dist/components/navbar/navbar.js +2 -0
- package/dist/components/navbar/navbar.js.map +1 -1
- package/dist/themes/default/index.css +164 -69
- package/package.json +6 -6
- package/src/components/navbar/navbar.tsx +9 -2
- package/src/themes/default/styles/display/virtual-table.css +136 -19
- package/src/themes/default/styles/layout/block.css +0 -1
- package/src/themes/default/styles/layout/layout.css +72 -57
- package/templates/theme/styles/display/virtual-table.css +142 -19
- package/templates/theme/styles/layout/block.css +0 -1
- package/templates/theme/styles/layout/layout.css +72 -57
package/THEMING.md
CHANGED
|
@@ -568,7 +568,10 @@ Status badge:
|
|
|
568
568
|
|
|
569
569
|
Dialog backdrop:
|
|
570
570
|
|
|
571
|
-
- use
|
|
571
|
+
- use the shipped `DialogOverlay` or `AlertDialogOverlay`; the default theme
|
|
572
|
+
already applies `--ak-color-backdrop`, blur, stacking, and animation
|
|
573
|
+
- customize the theme-level values of `--ak-color-backdrop` and
|
|
574
|
+
`--ak-z-modal-backdrop` when the product needs a different backdrop
|
|
572
575
|
|
|
573
576
|
### Incorrect usage examples
|
|
574
577
|
|
|
@@ -579,6 +582,24 @@ Do not:
|
|
|
579
582
|
- use border colors as text colors
|
|
580
583
|
- derive component styling from unrelated tokens
|
|
581
584
|
- invent one-off component colors inside `askr-ui`
|
|
585
|
+
- replace the shipped dialog overlay treatment with a competing
|
|
586
|
+
`class`/`className` that sets `background` or `z-index` directly
|
|
587
|
+
|
|
588
|
+
Dialog backdrop customization:
|
|
589
|
+
|
|
590
|
+
```css
|
|
591
|
+
/* Do: customize the shared theme contract. */
|
|
592
|
+
:root {
|
|
593
|
+
--ak-color-backdrop: rgb(8 12 20 / 18%);
|
|
594
|
+
--ak-z-modal-backdrop: 1040;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
/* Do not: bypass the shipped overlay treatment. */
|
|
598
|
+
.dialog-overlay {
|
|
599
|
+
background: rgb(0 0 0 / 90%);
|
|
600
|
+
z-index: 9999;
|
|
601
|
+
}
|
|
602
|
+
```
|
|
582
603
|
|
|
583
604
|
---
|
|
584
605
|
|
|
@@ -94,6 +94,7 @@ function NavBrand(props) {
|
|
|
94
94
|
function NavGroup(props) {
|
|
95
95
|
const { align, children, label, title = label, ...rest } = props;
|
|
96
96
|
return /* @__PURE__ */ jsxs(LayoutBlock, {
|
|
97
|
+
direction: "column",
|
|
97
98
|
align,
|
|
98
99
|
gap: "sm",
|
|
99
100
|
...rest,
|
|
@@ -103,6 +104,7 @@ function NavGroup(props) {
|
|
|
103
104
|
"data-slot": "nav-group-label",
|
|
104
105
|
children: title
|
|
105
106
|
}) : null, /* @__PURE__ */ jsx(LayoutBlock, {
|
|
107
|
+
direction: "column",
|
|
106
108
|
gap: "xs",
|
|
107
109
|
"data-slot": "nav-group-body",
|
|
108
110
|
children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navbar.js","names":["DropdownContent"],"sources":["../../../src/components/navbar/navbar.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n Dropdown,\n DropdownTrigger,\n} from \"@askrjs/ui\";\nimport { Block } from \"../block\";\nimport { classes } from \"../_internal/classes\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\nimport { DropdownContent } from \"../overlays/dropdown-content\";\nimport type { NavBrandProps, NavDropdownProps, NavGroupProps, NavbarProps } from \"./navbar.types\";\n\nconst ASKR_FRAGMENT = Symbol.for(\"askr.fragment\");\nconst LayoutBlock = Block as (props: Record<string, unknown>) => JSX.Element;\n\nfunction flattenNavbarChildren(children: unknown): unknown[] {\n return toChildArray(children).flatMap((child) => {\n if (isJsxElement(child) && child.type === ASKR_FRAGMENT) {\n return flattenNavbarChildren(child.props?.children);\n }\n\n return [child];\n });\n}\n\nfunction isNavBrandChild(child: unknown): boolean {\n return (\n isJsxElement(child) && (child.type === NavBrand || child.props?.[\"data-slot\"] === \"nav-brand\")\n );\n}\n\nfunction hasRenderableChildren(children: readonly unknown[]): boolean {\n return children.some((child) => {\n if (Array.isArray(child)) {\n return hasRenderableChildren(child);\n }\n\n return child !== undefined && child !== null && typeof child !== \"boolean\";\n });\n}\n\n/**\n * Horizontal navigation bar. Below `collapseAt`/`breakpoint`, non-brand\n * children are grouped behind a collapsible toggle so brand content stays\n * visible while the rest collapses on small screens.\n */\nexport function Navbar(props: NavbarProps): JSX.Element {\n const {\n breakpoint,\n children,\n collapseAt = breakpoint ?? false,\n collapseIcon,\n collapseLabel = \"Menu\",\n ...rest\n } = props;\n\n if (!collapseAt) {\n return (\n <LayoutBlock\n as=\"nav\"\n direction=\"row\"\n align=\"center\"\n gap=\"md\"\n width=\"full\"\n {...rest}\n data-slot=\"navbar\"\n >\n {children}\n </LayoutBlock>\n );\n }\n\n const navbarChildren = flattenNavbarChildren(children);\n const brandChildren = navbarChildren.filter(isNavBrandChild);\n const navChildren = navbarChildren.filter((child) => !isNavBrandChild(child));\n const hasNavContent = hasRenderableChildren(navChildren);\n const content = (\n <LayoutBlock direction=\"row\" align=\"center\" gap=\"md\" width=\"full\" data-slot=\"navbar-content\">\n {navChildren}\n </LayoutBlock>\n );\n const collapse = hasNavContent ? (\n <div data-slot=\"navbar-collapse\">\n <Collapsible>\n <CollapsibleTrigger aria-label={collapseLabel} data-slot=\"navbar-toggle\">\n {collapseIcon}\n <span data-slot=\"navbar-toggle-label\">{collapseLabel}</span>\n </CollapsibleTrigger>\n <CollapsibleContent forceMount asChild data-slot=\"navbar-content\">\n {content}\n </CollapsibleContent>\n </Collapsible>\n </div>\n ) : null;\n\n return (\n <LayoutBlock\n as=\"nav\"\n direction=\"row\"\n align=\"center\"\n gap=\"md\"\n width=\"full\"\n {...rest}\n data-collapse-at={collapseAt}\n data-slot=\"navbar\"\n >\n {[...brandChildren, collapse]}\n </LayoutBlock>\n );\n}\n\n/** Renders the brand/logo slot of a {@link Navbar}; excluded from the collapsible section. */\nexport function NavBrand(props: NavBrandProps): JSX.Element {\n const { children, ...rest } = props;\n\n return (\n <LayoutBlock\n direction=\"row\"\n align=\"center\"\n gap=\"sm\"\n shrink={false}\n {...rest}\n data-slot=\"nav-brand\"\n >\n {children}\n </LayoutBlock>\n );\n}\n\n/** Groups related {@link Navbar} items under an optional label. */\nexport function NavGroup(props: NavGroupProps): JSX.Element {\n const { align, children, label, title = label, ...rest } = props;\n\n return (\n <LayoutBlock
|
|
1
|
+
{"version":3,"file":"navbar.js","names":["DropdownContent"],"sources":["../../../src/components/navbar/navbar.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n Dropdown,\n DropdownTrigger,\n} from \"@askrjs/ui\";\nimport { Block } from \"../block\";\nimport { classes } from \"../_internal/classes\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\nimport { DropdownContent } from \"../overlays/dropdown-content\";\nimport type { NavBrandProps, NavDropdownProps, NavGroupProps, NavbarProps } from \"./navbar.types\";\n\nconst ASKR_FRAGMENT = Symbol.for(\"askr.fragment\");\nconst LayoutBlock = Block as (props: Record<string, unknown>) => JSX.Element;\n\nfunction flattenNavbarChildren(children: unknown): unknown[] {\n return toChildArray(children).flatMap((child) => {\n if (isJsxElement(child) && child.type === ASKR_FRAGMENT) {\n return flattenNavbarChildren(child.props?.children);\n }\n\n return [child];\n });\n}\n\nfunction isNavBrandChild(child: unknown): boolean {\n return (\n isJsxElement(child) && (child.type === NavBrand || child.props?.[\"data-slot\"] === \"nav-brand\")\n );\n}\n\nfunction hasRenderableChildren(children: readonly unknown[]): boolean {\n return children.some((child) => {\n if (Array.isArray(child)) {\n return hasRenderableChildren(child);\n }\n\n return child !== undefined && child !== null && typeof child !== \"boolean\";\n });\n}\n\n/**\n * Horizontal navigation bar. Below `collapseAt`/`breakpoint`, non-brand\n * children are grouped behind a collapsible toggle so brand content stays\n * visible while the rest collapses on small screens.\n */\nexport function Navbar(props: NavbarProps): JSX.Element {\n const {\n breakpoint,\n children,\n collapseAt = breakpoint ?? false,\n collapseIcon,\n collapseLabel = \"Menu\",\n ...rest\n } = props;\n\n if (!collapseAt) {\n return (\n <LayoutBlock\n as=\"nav\"\n direction=\"row\"\n align=\"center\"\n gap=\"md\"\n width=\"full\"\n {...rest}\n data-slot=\"navbar\"\n >\n {children}\n </LayoutBlock>\n );\n }\n\n const navbarChildren = flattenNavbarChildren(children);\n const brandChildren = navbarChildren.filter(isNavBrandChild);\n const navChildren = navbarChildren.filter((child) => !isNavBrandChild(child));\n const hasNavContent = hasRenderableChildren(navChildren);\n const content = (\n <LayoutBlock direction=\"row\" align=\"center\" gap=\"md\" width=\"full\" data-slot=\"navbar-content\">\n {navChildren}\n </LayoutBlock>\n );\n const collapse = hasNavContent ? (\n <div data-slot=\"navbar-collapse\">\n <Collapsible>\n <CollapsibleTrigger aria-label={collapseLabel} data-slot=\"navbar-toggle\">\n {collapseIcon}\n <span data-slot=\"navbar-toggle-label\">{collapseLabel}</span>\n </CollapsibleTrigger>\n <CollapsibleContent forceMount asChild data-slot=\"navbar-content\">\n {content}\n </CollapsibleContent>\n </Collapsible>\n </div>\n ) : null;\n\n return (\n <LayoutBlock\n as=\"nav\"\n direction=\"row\"\n align=\"center\"\n gap=\"md\"\n width=\"full\"\n {...rest}\n data-collapse-at={collapseAt}\n data-slot=\"navbar\"\n >\n {[...brandChildren, collapse]}\n </LayoutBlock>\n );\n}\n\n/** Renders the brand/logo slot of a {@link Navbar}; excluded from the collapsible section. */\nexport function NavBrand(props: NavBrandProps): JSX.Element {\n const { children, ...rest } = props;\n\n return (\n <LayoutBlock\n direction=\"row\"\n align=\"center\"\n gap=\"sm\"\n shrink={false}\n {...rest}\n data-slot=\"nav-brand\"\n >\n {children}\n </LayoutBlock>\n );\n}\n\n/** Groups related {@link Navbar} items under an optional label. */\nexport function NavGroup(props: NavGroupProps): JSX.Element {\n const { align, children, label, title = label, ...rest } = props;\n\n return (\n <LayoutBlock\n direction=\"column\"\n align={align}\n gap=\"sm\"\n {...rest}\n data-align={align}\n data-slot=\"nav-group\"\n >\n {title !== undefined ? <div data-slot=\"nav-group-label\">{title}</div> : null}\n <LayoutBlock direction=\"column\" gap=\"xs\" data-slot=\"nav-group-body\">\n {children}\n </LayoutBlock>\n </LayoutBlock>\n );\n}\n\n/** Renders a dropdown menu triggered from within a {@link Navbar}. */\nexport function NavDropdown(props: NavDropdownProps): JSX.Element {\n const { align = \"end\", children, label, side = \"bottom\", sideOffset = 6, ...rest } = props;\n\n return (\n <LayoutBlock direction=\"row\" align=\"center\" data-slot=\"nav-dropdown\">\n <Dropdown {...rest}>\n <DropdownTrigger class={classes(\"nav-item\")} data-slot=\"nav-dropdown-trigger\">\n {label}\n </DropdownTrigger>\n <DropdownContent\n align={align}\n class={classes(\"dropdown-content\")}\n data-slot=\"nav-dropdown-content\"\n side={side}\n sideOffset={sideOffset}\n >\n {children}\n </DropdownContent>\n </Dropdown>\n </LayoutBlock>\n );\n}\n"],"mappings":";;;;;;;AAcA,MAAM,gBAAgB,OAAO,IAAI,eAAe;AAChD,MAAM,cAAc;AAEpB,SAAS,sBAAsB,UAA8B;CAC3D,OAAO,aAAa,QAAQ,CAAC,CAAC,SAAS,UAAU;EAC/C,IAAI,aAAa,KAAK,KAAK,MAAM,SAAS,eACxC,OAAO,sBAAsB,MAAM,OAAO,QAAQ;EAGpD,OAAO,CAAC,KAAK;CACf,CAAC;AACH;AAEA,SAAS,gBAAgB,OAAyB;CAChD,OACE,aAAa,KAAK,MAAM,MAAM,SAAS,YAAY,MAAM,QAAQ,iBAAiB;AAEtF;AAEA,SAAS,sBAAsB,UAAuC;CACpE,OAAO,SAAS,MAAM,UAAU;EAC9B,IAAI,MAAM,QAAQ,KAAK,GACrB,OAAO,sBAAsB,KAAK;EAGpC,OAAO,UAAU,KAAA,KAAa,UAAU,QAAQ,OAAO,UAAU;CACnE,CAAC;AACH;;;;;;AAOA,SAAgB,OAAO,OAAiC;CACtD,MAAM,EACJ,YACA,UACA,aAAa,cAAc,OAC3B,cACA,gBAAgB,QAChB,GAAG,SACD;CAEJ,IAAI,CAAC,YACH,OACE,oBAAC,aAAD;EACE,IAAG;EACH,WAAU;EACV,OAAM;EACN,KAAI;EACJ,OAAM;EACN,GAAI;EACJ,aAAU;EAET;CACU,CAAA;CAIjB,MAAM,iBAAiB,sBAAsB,QAAQ;CACrD,MAAM,gBAAgB,eAAe,OAAO,eAAe;CAC3D,MAAM,cAAc,eAAe,QAAQ,UAAU,CAAC,gBAAgB,KAAK,CAAC;CAO5E,MAAM,WANgB,sBAAsB,WAMf,IAC3B,oBAAC,OAAD;EAAK,aAAU;EACb,UAAA,qBAAC,aAAD,EAAA,UAAA,CACE,qBAAC,oBAAD;GAAoB,cAAY;GAAe,aAAU;GAAzD,UAAA,CACG,cACD,oBAAC,QAAD;IAAM,aAAU;IAAuB,UAAA;GAAoB,CAAA,CACzC;EACpB,CAAA,GAAA,oBAAC,oBAAD;GAAoB,YAAA;GAAW,SAAA;GAAQ,aAAU;GAC9C,UAAA,oBAZN,aAAD;IAAa,WAAU;IAAM,OAAM;IAAS,KAAI;IAAK,OAAM;IAAO,aAAU;IACzE,UAAA;GACU,CAUA;EACW,CAAA,CACT,EAAA,CAAA;CACV,CAAA,IACH;CAEJ,OACE,oBAAC,aAAD;EACE,IAAG;EACH,WAAU;EACV,OAAM;EACN,KAAI;EACJ,OAAM;EACN,GAAI;EACJ,oBAAkB;EAClB,aAAU;EAET,UAAA,CAAC,GAAG,eAAe,QAAQ;CACjB,CAAA;AAEjB;;AAGA,SAAgB,SAAS,OAAmC;CAC1D,MAAM,EAAE,UAAU,GAAG,SAAS;CAE9B,OACE,oBAAC,aAAD;EACE,WAAU;EACV,OAAM;EACN,KAAI;EACJ,QAAQ;EACR,GAAI;EACJ,aAAU;EAET;CACU,CAAA;AAEjB;;AAGA,SAAgB,SAAS,OAAmC;CAC1D,MAAM,EAAE,OAAO,UAAU,OAAO,QAAQ,OAAO,GAAG,SAAS;CAE3D,OACE,qBAAC,aAAD;EACE,WAAU;EACH;EACP,KAAI;EACJ,GAAI;EACJ,cAAY;EACZ,aAAU;EANZ,UAAA,CAQG,UAAU,KAAA,IAAY,oBAAC,OAAD;GAAK,aAAU;GAAmB,UAAA;EAAW,CAAA,IAAI,MACxE,oBAAC,aAAD;GAAa,WAAU;GAAS,KAAI;GAAK,aAAU;GAChD;EACU,CAAA,CACF;;AAEjB;;AAGA,SAAgB,YAAY,OAAsC;CAChE,MAAM,EAAE,QAAQ,OAAO,UAAU,OAAO,OAAO,UAAU,aAAa,GAAG,GAAG,SAAS;CAErF,OACE,oBAAC,aAAD;EAAa,WAAU;EAAM,OAAM;EAAS,aAAU;EACpD,UAAA,qBAAC,UAAD;GAAU,GAAI;GAAd,UAAA,CACE,oBAAC,iBAAD;IAAiB,OAAO,QAAQ,UAAU;IAAG,aAAU;IACpD,UAAA;GACc,CAAA,GACjB,oBAACA,mBAAD;IACS;IACP,OAAO,QAAQ,kBAAkB;IACjC,aAAU;IACJ;IACM;IAEX;GACc,CAAA,CACT;;CACC,CAAA;AAEjB"}
|
|
@@ -656,24 +656,24 @@
|
|
|
656
656
|
--ak-display-md: var(--ak-display-sm);
|
|
657
657
|
--ak-display-lg: var(--ak-display-md);
|
|
658
658
|
--ak-display-xl: var(--ak-display-lg);
|
|
659
|
-
--ak-flex-direction-base:
|
|
659
|
+
--ak-flex-direction-base: row;
|
|
660
660
|
--ak-flex-direction-sm: var(--ak-flex-direction-base);
|
|
661
661
|
--ak-flex-direction-md: var(--ak-flex-direction-sm);
|
|
662
662
|
--ak-flex-direction-lg: var(--ak-flex-direction-md);
|
|
663
663
|
--ak-flex-direction-xl: var(--ak-flex-direction-lg);
|
|
664
664
|
--ak-flex-wrap-base: nowrap;
|
|
665
665
|
--ak-flex-wrap-sm: var(--ak-flex-wrap-base);
|
|
666
|
-
--ak-align-items-base:
|
|
666
|
+
--ak-align-items-base: normal;
|
|
667
667
|
--ak-align-items-sm: var(--ak-align-items-base);
|
|
668
668
|
--ak-align-items-md: var(--ak-align-items-sm);
|
|
669
669
|
--ak-align-items-lg: var(--ak-align-items-md);
|
|
670
670
|
--ak-align-items-xl: var(--ak-align-items-lg);
|
|
671
|
-
--ak-justify-content-base:
|
|
671
|
+
--ak-justify-content-base: normal;
|
|
672
672
|
--ak-justify-content-sm: var(--ak-justify-content-base);
|
|
673
673
|
--ak-justify-content-md: var(--ak-justify-content-sm);
|
|
674
674
|
--ak-justify-content-lg: var(--ak-justify-content-md);
|
|
675
675
|
--ak-justify-content-xl: var(--ak-justify-content-lg);
|
|
676
|
-
--ak-gap-base:
|
|
676
|
+
--ak-gap-base: normal;
|
|
677
677
|
--ak-gap-sm: var(--ak-gap-base);
|
|
678
678
|
--ak-gap-md: var(--ak-gap-sm);
|
|
679
679
|
--ak-gap-lg: var(--ak-gap-md);
|
|
@@ -692,7 +692,7 @@
|
|
|
692
692
|
--ak-flex-basis-sm: var(--ak-flex-basis-base);
|
|
693
693
|
--ak-flex-basis-md: var(--ak-flex-basis-sm);
|
|
694
694
|
--ak-flex-basis-lg: var(--ak-flex-basis-md);
|
|
695
|
-
--ak-min-width-base:
|
|
695
|
+
--ak-min-width-base: auto;
|
|
696
696
|
--ak-min-width-sm: var(--ak-min-width-base);
|
|
697
697
|
--ak-min-width-md: var(--ak-min-width-sm);
|
|
698
698
|
--ak-min-width-lg: var(--ak-min-width-md);
|
|
@@ -772,7 +772,7 @@
|
|
|
772
772
|
--ak-overflow-x-sm: var(--ak-overflow-x-base);
|
|
773
773
|
--ak-overflow-y-base: var(--ak-overflow-base);
|
|
774
774
|
--ak-overflow-y-sm: var(--ak-overflow-y-base);
|
|
775
|
-
--ak-border-base:
|
|
775
|
+
--ak-border-base: medium none currentcolor;
|
|
776
776
|
--ak-border-sm: var(--ak-border-base);
|
|
777
777
|
--ak-border-md: var(--ak-border-sm);
|
|
778
778
|
--ak-border-lg: var(--ak-border-md);
|
|
@@ -807,15 +807,15 @@
|
|
|
807
807
|
--ak-box-shadow-xl: var(--ak-box-shadow-lg);
|
|
808
808
|
box-sizing: border-box;
|
|
809
809
|
display: var(--ak-display-base, flex);
|
|
810
|
-
flex-direction: var(--ak-flex-direction-base,
|
|
810
|
+
flex-direction: var(--ak-flex-direction-base, row);
|
|
811
811
|
flex-wrap: var(--ak-flex-wrap-base, nowrap);
|
|
812
|
-
align-items: var(--ak-align-items-base,
|
|
813
|
-
justify-content: var(--ak-justify-content-base,
|
|
814
|
-
gap: var(--ak-gap-base,
|
|
812
|
+
align-items: var(--ak-align-items-base, normal);
|
|
813
|
+
justify-content: var(--ak-justify-content-base, normal);
|
|
814
|
+
gap: var(--ak-gap-base, normal);
|
|
815
815
|
flex-grow: var(--ak-flex-grow-base, 0);
|
|
816
816
|
flex-shrink: var(--ak-flex-shrink-base, 1);
|
|
817
817
|
flex-basis: var(--ak-flex-basis-base, auto);
|
|
818
|
-
min-width: var(--ak-min-width-base,
|
|
818
|
+
min-width: var(--ak-min-width-base, auto);
|
|
819
819
|
max-width: var(--ak-max-width-base, none);
|
|
820
820
|
width: var(--ak-width-base, auto);
|
|
821
821
|
min-height: var(--ak-min-height-base, auto);
|
|
@@ -837,10 +837,10 @@
|
|
|
837
837
|
overflow: var(--ak-overflow-base, visible);
|
|
838
838
|
overflow-x: var(--ak-overflow-x-base, var(--ak-overflow-base, visible));
|
|
839
839
|
overflow-y: var(--ak-overflow-y-base, var(--ak-overflow-base, visible));
|
|
840
|
-
border: var(--ak-border-base,
|
|
841
|
-
border-top: var(--ak-border-top-base, var(--ak-border-base,
|
|
842
|
-
border-bottom: var(--ak-border-bottom-base, var(--ak-border-base,
|
|
843
|
-
border-right: var(--ak-border-right-base, var(--ak-border-base,
|
|
840
|
+
border: var(--ak-border-base, medium none currentcolor);
|
|
841
|
+
border-top: var(--ak-border-top-base, var(--ak-border-base, medium none currentcolor));
|
|
842
|
+
border-bottom: var(--ak-border-bottom-base, var(--ak-border-base, medium none currentcolor));
|
|
843
|
+
border-right: var(--ak-border-right-base, var(--ak-border-base, medium none currentcolor));
|
|
844
844
|
border-radius: var(--ak-border-radius-base, 0);
|
|
845
845
|
background: var(--ak-background-base, transparent);
|
|
846
846
|
box-shadow: var(--ak-box-shadow-base, none);
|
|
@@ -849,15 +849,15 @@
|
|
|
849
849
|
@media (width >= 40rem) {
|
|
850
850
|
:where([data-ak-layout="true"]) {
|
|
851
851
|
display: var(--ak-display-sm, var(--ak-display-base, flex));
|
|
852
|
-
flex-direction: var(--ak-flex-direction-sm, var(--ak-flex-direction-base,
|
|
852
|
+
flex-direction: var(--ak-flex-direction-sm, var(--ak-flex-direction-base, row));
|
|
853
853
|
flex-wrap: var(--ak-flex-wrap-sm, var(--ak-flex-wrap-base, nowrap));
|
|
854
|
-
align-items: var(--ak-align-items-sm, var(--ak-align-items-base,
|
|
855
|
-
justify-content: var(--ak-justify-content-sm, var(--ak-justify-content-base,
|
|
856
|
-
gap: var(--ak-gap-sm, var(--ak-gap-base,
|
|
854
|
+
align-items: var(--ak-align-items-sm, var(--ak-align-items-base, normal));
|
|
855
|
+
justify-content: var(--ak-justify-content-sm, var(--ak-justify-content-base, normal));
|
|
856
|
+
gap: var(--ak-gap-sm, var(--ak-gap-base, normal));
|
|
857
857
|
flex-grow: var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0));
|
|
858
858
|
flex-shrink: var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1));
|
|
859
859
|
flex-basis: var(--ak-flex-basis-sm, var(--ak-flex-basis-base, auto));
|
|
860
|
-
min-width: var(--ak-min-width-sm, var(--ak-min-width-base,
|
|
860
|
+
min-width: var(--ak-min-width-sm, var(--ak-min-width-base, auto));
|
|
861
861
|
max-width: var(--ak-max-width-sm, var(--ak-max-width-base, none));
|
|
862
862
|
width: var(--ak-width-sm, var(--ak-width-base, auto));
|
|
863
863
|
min-height: var(--ak-min-height-sm, var(--ak-min-height-base, auto));
|
|
@@ -879,10 +879,10 @@
|
|
|
879
879
|
overflow: var(--ak-overflow-sm, var(--ak-overflow-base, visible));
|
|
880
880
|
overflow-x: var(--ak-overflow-x-sm, var(--ak-overflow-x-base, var(--ak-overflow-sm, var(--ak-overflow-base, visible))));
|
|
881
881
|
overflow-y: var(--ak-overflow-y-sm, var(--ak-overflow-y-base, var(--ak-overflow-sm, var(--ak-overflow-base, visible))));
|
|
882
|
-
border: var(--ak-border-sm, var(--ak-border-base,
|
|
883
|
-
border-top: var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-sm, var(--ak-border-base,
|
|
884
|
-
border-bottom: var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-sm, var(--ak-border-base,
|
|
885
|
-
border-right: var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-sm, var(--ak-border-base,
|
|
882
|
+
border: var(--ak-border-sm, var(--ak-border-base, medium none currentcolor));
|
|
883
|
+
border-top: var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))));
|
|
884
|
+
border-bottom: var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))));
|
|
885
|
+
border-right: var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))));
|
|
886
886
|
border-radius: var(--ak-border-radius-sm, var(--ak-border-radius-base, 0));
|
|
887
887
|
background: var(--ak-background-sm, var(--ak-background-base, transparent));
|
|
888
888
|
box-shadow: var(--ak-box-shadow-sm, var(--ak-box-shadow-base, none));
|
|
@@ -892,13 +892,13 @@
|
|
|
892
892
|
@media (width >= 48rem) {
|
|
893
893
|
:where([data-ak-layout="true"]) {
|
|
894
894
|
display: var(--ak-display-md, var(--ak-display-sm, var(--ak-display-base, flex)));
|
|
895
|
-
flex-direction: var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-base,
|
|
896
|
-
align-items: var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base,
|
|
897
|
-
justify-content: var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-base,
|
|
898
|
-
gap: var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base,
|
|
895
|
+
flex-direction: var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-base, row)));
|
|
896
|
+
align-items: var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, normal)));
|
|
897
|
+
justify-content: var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-base, normal)));
|
|
898
|
+
gap: var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, normal)));
|
|
899
899
|
flex-grow: var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0)));
|
|
900
900
|
flex-shrink: var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1)));
|
|
901
|
-
min-width: var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base,
|
|
901
|
+
min-width: var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, auto)));
|
|
902
902
|
max-width: var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none)));
|
|
903
903
|
width: var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto)));
|
|
904
904
|
min-height: var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)));
|
|
@@ -913,10 +913,10 @@
|
|
|
913
913
|
position: var(--ak-position-md, var(--ak-position-sm, var(--ak-position-base, static)));
|
|
914
914
|
top: var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto)));
|
|
915
915
|
z-index: var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto)));
|
|
916
|
-
border: var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base,
|
|
917
|
-
border-top: var(--ak-border-top-md, var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base,
|
|
918
|
-
border-bottom: var(--ak-border-bottom-md, var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base,
|
|
919
|
-
border-right: var(--ak-border-right-md, var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base,
|
|
916
|
+
border: var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor)));
|
|
917
|
+
border-top: var(--ak-border-top-md, var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))));
|
|
918
|
+
border-bottom: var(--ak-border-bottom-md, var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))));
|
|
919
|
+
border-right: var(--ak-border-right-md, var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))));
|
|
920
920
|
border-radius: var(--ak-border-radius-md, var(--ak-border-radius-sm, var(--ak-border-radius-base, 0)));
|
|
921
921
|
background: var(--ak-background-md, var(--ak-background-sm, var(--ak-background-base, transparent)));
|
|
922
922
|
box-shadow: var(--ak-box-shadow-md, var(--ak-box-shadow-sm, var(--ak-box-shadow-base, none)));
|
|
@@ -926,13 +926,13 @@
|
|
|
926
926
|
@media (width >= 64rem) {
|
|
927
927
|
:where([data-ak-layout="true"]) {
|
|
928
928
|
display: var(--ak-display-lg, var(--ak-display-md, var(--ak-display-sm, var(--ak-display-base, flex))));
|
|
929
|
-
flex-direction: var(--ak-flex-direction-lg, var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-base,
|
|
930
|
-
align-items: var(--ak-align-items-lg, var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base,
|
|
931
|
-
justify-content: var(--ak-justify-content-lg, var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-base,
|
|
932
|
-
gap: var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base,
|
|
929
|
+
flex-direction: var(--ak-flex-direction-lg, var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-base, row))));
|
|
930
|
+
align-items: var(--ak-align-items-lg, var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, normal))));
|
|
931
|
+
justify-content: var(--ak-justify-content-lg, var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-base, normal))));
|
|
932
|
+
gap: var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, normal))));
|
|
933
933
|
flex-grow: var(--ak-flex-grow-lg, var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0))));
|
|
934
934
|
flex-shrink: var(--ak-flex-shrink-lg, var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1))));
|
|
935
|
-
min-width: var(--ak-min-width-lg, var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base,
|
|
935
|
+
min-width: var(--ak-min-width-lg, var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, auto))));
|
|
936
936
|
max-width: var(--ak-max-width-lg, var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none))));
|
|
937
937
|
width: var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto))));
|
|
938
938
|
min-height: var(--ak-min-height-lg, var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto))));
|
|
@@ -946,10 +946,10 @@
|
|
|
946
946
|
position: var(--ak-position-lg, var(--ak-position-md, var(--ak-position-sm, var(--ak-position-base, static))));
|
|
947
947
|
top: var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto))));
|
|
948
948
|
z-index: var(--ak-z-index-lg, var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto))));
|
|
949
|
-
border: var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base,
|
|
950
|
-
border-top: var(--ak-border-top-lg, var(--ak-border-top-md, var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base,
|
|
951
|
-
border-bottom: var(--ak-border-bottom-lg, var(--ak-border-bottom-md, var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base,
|
|
952
|
-
border-right: var(--ak-border-right-lg, var(--ak-border-right-md, var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base,
|
|
949
|
+
border: var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))));
|
|
950
|
+
border-top: var(--ak-border-top-lg, var(--ak-border-top-md, var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))))));
|
|
951
|
+
border-bottom: var(--ak-border-bottom-lg, var(--ak-border-bottom-md, var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))))));
|
|
952
|
+
border-right: var(--ak-border-right-lg, var(--ak-border-right-md, var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))))));
|
|
953
953
|
border-radius: var(--ak-border-radius-lg, var(--ak-border-radius-md, var(--ak-border-radius-sm, var(--ak-border-radius-base, 0))));
|
|
954
954
|
background: var(--ak-background-lg, var(--ak-background-md, var(--ak-background-sm, var(--ak-background-base, transparent))));
|
|
955
955
|
box-shadow: var(--ak-box-shadow-lg, var(--ak-box-shadow-md, var(--ak-box-shadow-sm, var(--ak-box-shadow-base, none))));
|
|
@@ -959,13 +959,13 @@
|
|
|
959
959
|
@media (width >= 80rem) {
|
|
960
960
|
:where([data-ak-layout="true"]) {
|
|
961
961
|
display: var(--ak-display-xl, var(--ak-display-lg, var(--ak-display-md, var(--ak-display-sm, var(--ak-display-base, flex)))));
|
|
962
|
-
flex-direction: var(--ak-flex-direction-xl, var(--ak-flex-direction-lg, var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-base,
|
|
963
|
-
align-items: var(--ak-align-items-xl, var(--ak-align-items-lg, var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base,
|
|
964
|
-
justify-content: var(--ak-justify-content-xl, var(--ak-justify-content-lg, var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-base,
|
|
965
|
-
gap: var(--ak-gap-xl, var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base,
|
|
962
|
+
flex-direction: var(--ak-flex-direction-xl, var(--ak-flex-direction-lg, var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-base, row)))));
|
|
963
|
+
align-items: var(--ak-align-items-xl, var(--ak-align-items-lg, var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, normal)))));
|
|
964
|
+
justify-content: var(--ak-justify-content-xl, var(--ak-justify-content-lg, var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-base, normal)))));
|
|
965
|
+
gap: var(--ak-gap-xl, var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, normal)))));
|
|
966
966
|
flex-grow: var(--ak-flex-grow-xl, var(--ak-flex-grow-lg, var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0)))));
|
|
967
967
|
flex-shrink: var(--ak-flex-shrink-xl, var(--ak-flex-shrink-lg, var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1)))));
|
|
968
|
-
min-width: var(--ak-min-width-xl, var(--ak-min-width-lg, var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base,
|
|
968
|
+
min-width: var(--ak-min-width-xl, var(--ak-min-width-lg, var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, auto)))));
|
|
969
969
|
width: var(--ak-width-xl, var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto)))));
|
|
970
970
|
max-width: var(--ak-max-width-xl, var(--ak-max-width-lg, var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none)))));
|
|
971
971
|
min-height: var(--ak-min-height-xl, var(--ak-min-height-lg, var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)))));
|
|
@@ -980,10 +980,10 @@
|
|
|
980
980
|
position: var(--ak-position-xl, var(--ak-position-lg, var(--ak-position-md, var(--ak-position-sm, var(--ak-position-base, static)))));
|
|
981
981
|
top: var(--ak-top-xl, var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto)))));
|
|
982
982
|
z-index: var(--ak-z-index-xl, var(--ak-z-index-lg, var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto)))));
|
|
983
|
-
border: var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base,
|
|
984
|
-
border-top: var(--ak-border-top-xl, var(--ak-border-top-lg, var(--ak-border-top-md, var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base,
|
|
985
|
-
border-bottom: var(--ak-border-bottom-xl, var(--ak-border-bottom-lg, var(--ak-border-bottom-md, var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base,
|
|
986
|
-
border-right: var(--ak-border-right-xl, var(--ak-border-right-lg, var(--ak-border-right-md, var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base,
|
|
983
|
+
border: var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor)))));
|
|
984
|
+
border-top: var(--ak-border-top-xl, var(--ak-border-top-lg, var(--ak-border-top-md, var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))))))));
|
|
985
|
+
border-bottom: var(--ak-border-bottom-xl, var(--ak-border-bottom-lg, var(--ak-border-bottom-md, var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))))))));
|
|
986
|
+
border-right: var(--ak-border-right-xl, var(--ak-border-right-lg, var(--ak-border-right-md, var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, medium none currentcolor))))))))));
|
|
987
987
|
border-radius: var(--ak-border-radius-xl, var(--ak-border-radius-lg, var(--ak-border-radius-md, var(--ak-border-radius-sm, var(--ak-border-radius-base, 0)))));
|
|
988
988
|
background: var(--ak-background-xl, var(--ak-background-lg, var(--ak-background-md, var(--ak-background-sm, var(--ak-background-base, transparent)))));
|
|
989
989
|
box-shadow: var(--ak-box-shadow-xl, var(--ak-box-shadow-lg, var(--ak-box-shadow-md, var(--ak-box-shadow-sm, var(--ak-box-shadow-base, none)))));
|
|
@@ -1010,7 +1010,7 @@
|
|
|
1010
1010
|
overflow: hidden;
|
|
1011
1011
|
}
|
|
1012
1012
|
|
|
1013
|
-
:where([data-slot="
|
|
1013
|
+
:where([data-slot="container"], [data-slot="header"], [data-slot="main"], [data-slot="section"], [data-slot="aside"], [data-slot="sidebar"], [data-slot="navbar"], [data-slot="navbar-collapse"], [data-slot="navbar-content"], [data-slot="nav-brand"], [data-slot="nav-dropdown"], [data-slot="nav-group"], [data-slot="nav-group-body"], [data-slot="brand"], [data-slot="grid"], [data-slot="page"], [data-slot="page-header"], [data-slot="toolbar"], [data-slot="empty-state"]) {
|
|
1014
1014
|
min-inline-size: 0;
|
|
1015
1015
|
}
|
|
1016
1016
|
|
|
@@ -4169,6 +4169,8 @@
|
|
|
4169
4169
|
overscroll-behavior: contain;
|
|
4170
4170
|
scrollbar-width: thin;
|
|
4171
4171
|
scrollbar-color: var(--ak-color-border-strong) transparent;
|
|
4172
|
+
transition: border-color var(--ak-duration-fast) var(--ak-ease-standard),
|
|
4173
|
+
box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
|
|
4172
4174
|
overflow: auto;
|
|
4173
4175
|
}
|
|
4174
4176
|
|
|
@@ -4189,8 +4191,18 @@
|
|
|
4189
4191
|
min-inline-size: var(--ak-virtual-table-compact-min-inline-size, 40rem);
|
|
4190
4192
|
}
|
|
4191
4193
|
|
|
4192
|
-
:where([data-slot="virtual-table-head"])
|
|
4193
|
-
background: var(--ak-color-surface);
|
|
4194
|
+
:where([data-slot="virtual-table-head"]) {
|
|
4195
|
+
background: var(--ak-color-surface-muted);
|
|
4196
|
+
box-shadow: inset 0 -1px 0 var(--ak-color-border);
|
|
4197
|
+
}
|
|
4198
|
+
|
|
4199
|
+
:where([data-slot="virtual-table-header-row"]) {
|
|
4200
|
+
background: inherit;
|
|
4201
|
+
}
|
|
4202
|
+
|
|
4203
|
+
:where([data-slot="virtual-table"][data-at-top="false"]) :where([data-slot="virtual-table-head"]) {
|
|
4204
|
+
box-shadow: inset 0 -1px 0 var(--ak-color-border),
|
|
4205
|
+
var(--ak-shadow-md);
|
|
4194
4206
|
}
|
|
4195
4207
|
|
|
4196
4208
|
:where([data-slot="virtual-table-body"]) {
|
|
@@ -4198,36 +4210,61 @@
|
|
|
4198
4210
|
}
|
|
4199
4211
|
|
|
4200
4212
|
:where([data-slot="virtual-table-header-cell"], [data-slot="virtual-table-cell"]) {
|
|
4201
|
-
padding: var(--ak-space-sm) var(--ak-space-xs);
|
|
4202
|
-
border-block-end: 1px solid var(--ak-color-border);
|
|
4203
|
-
color: var(--ak-color-text);
|
|
4204
4213
|
font-size: var(--ak-font-size-sm);
|
|
4205
4214
|
line-height: var(--ak-line-height-normal);
|
|
4206
4215
|
text-align: start;
|
|
4207
4216
|
vertical-align: middle;
|
|
4217
|
+
}
|
|
4218
|
+
|
|
4219
|
+
:where([data-slot="virtual-table-header-cell"]) {
|
|
4220
|
+
padding: 0 var(--ak-space-sm);
|
|
4221
|
+
background: inherit;
|
|
4222
|
+
color: var(--ak-color-text-muted);
|
|
4223
|
+
font-weight: var(--ak-font-weight-medium);
|
|
4208
4224
|
text-overflow: ellipsis;
|
|
4209
4225
|
white-space: nowrap;
|
|
4210
4226
|
overflow: hidden;
|
|
4211
4227
|
}
|
|
4212
4228
|
|
|
4213
|
-
:where([data-slot="virtual-table-
|
|
4214
|
-
block-
|
|
4215
|
-
|
|
4229
|
+
:where([data-slot="virtual-table-cell"]) {
|
|
4230
|
+
border-block-end: 1px solid var(--ak-color-border);
|
|
4231
|
+
color: var(--ak-color-text);
|
|
4232
|
+
text-overflow: ellipsis;
|
|
4233
|
+
white-space: nowrap;
|
|
4234
|
+
padding: 0;
|
|
4235
|
+
position: relative;
|
|
4236
|
+
overflow: hidden;
|
|
4216
4237
|
}
|
|
4217
4238
|
|
|
4218
4239
|
:where([data-slot="virtual-table-row"]) {
|
|
4240
|
+
cursor: pointer;
|
|
4219
4241
|
transition: background var(--ak-duration-fast) var(--ak-ease-standard),
|
|
4220
|
-
color var(--ak-duration-fast) var(--ak-ease-standard)
|
|
4242
|
+
color var(--ak-duration-fast) var(--ak-ease-standard),
|
|
4243
|
+
box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
|
|
4221
4244
|
background: none;
|
|
4222
4245
|
}
|
|
4223
4246
|
|
|
4247
|
+
:where([data-slot="virtual-table-row"]) :where([data-slot="input"]:not(:disabled, [data-disabled], [aria-disabled="true"]), [data-slot="textarea"]:not(:disabled, [data-disabled], [aria-disabled="true"]), [contenteditable="true"], [role="searchbox"], [role="spinbutton"], [role="textbox"]) {
|
|
4248
|
+
cursor: text;
|
|
4249
|
+
}
|
|
4250
|
+
|
|
4224
4251
|
:where([data-slot="virtual-table-row"]:hover) {
|
|
4225
|
-
background:
|
|
4252
|
+
background: var(--ak-color-hover);
|
|
4226
4253
|
}
|
|
4227
4254
|
|
|
4228
4255
|
:where([data-slot="virtual-table-row"][data-selected="true"]) {
|
|
4229
|
-
background:
|
|
4256
|
+
background: var(--ak-color-selected);
|
|
4230
4257
|
color: var(--ak-color-text);
|
|
4258
|
+
box-shadow: inset 0 0 0 var(--ak-border-width-sm) var(--ak-color-selected-border);
|
|
4259
|
+
}
|
|
4260
|
+
|
|
4261
|
+
:where([data-slot="virtual-table-row"][data-selected="true"] > [data-slot="virtual-table-cell"]:first-child):before {
|
|
4262
|
+
inline-size: var(--ak-border-width-md);
|
|
4263
|
+
background: var(--ak-color-primary);
|
|
4264
|
+
content: "";
|
|
4265
|
+
position: absolute;
|
|
4266
|
+
inset-block: 0;
|
|
4267
|
+
inset-inline-start: 0;
|
|
4231
4268
|
}
|
|
4232
4269
|
|
|
4233
4270
|
:where([data-slot="virtual-table-spacer-row"]) {
|
|
@@ -4236,23 +4273,81 @@
|
|
|
4236
4273
|
|
|
4237
4274
|
:where([data-slot="virtual-table-cell-content"]) {
|
|
4238
4275
|
align-items: center;
|
|
4276
|
+
gap: var(--ak-space-xs);
|
|
4277
|
+
block-size: 100%;
|
|
4278
|
+
inline-size: 100%;
|
|
4239
4279
|
min-inline-size: 0;
|
|
4280
|
+
padding-inline: var(--ak-space-sm);
|
|
4281
|
+
box-sizing: border-box;
|
|
4282
|
+
text-overflow: ellipsis;
|
|
4283
|
+
white-space: nowrap;
|
|
4240
4284
|
display: flex;
|
|
4241
4285
|
}
|
|
4242
4286
|
|
|
4243
|
-
:where([data-slot="virtual-table-
|
|
4287
|
+
:where([data-slot="virtual-table-cell-content"] > [data-slot="text"], [data-slot="virtual-table-cell-content"] > [data-truncate="true"]) {
|
|
4288
|
+
text-overflow: ellipsis;
|
|
4289
|
+
white-space: nowrap;
|
|
4290
|
+
min-inline-size: 0;
|
|
4291
|
+
max-inline-size: 100%;
|
|
4292
|
+
overflow: hidden;
|
|
4293
|
+
}
|
|
4294
|
+
|
|
4295
|
+
:where([data-slot="virtual-table-header-cell"]:has([role="checkbox"]), [data-slot="virtual-table-cell-content"]:has([role="checkbox"])) {
|
|
4244
4296
|
padding-inline-end: 0;
|
|
4245
4297
|
}
|
|
4246
4298
|
|
|
4247
|
-
:where([data-slot="virtual-table-header-cell"] > [role="checkbox"]
|
|
4299
|
+
:where([data-slot="virtual-table-header-cell"] > [role="checkbox"]) {
|
|
4248
4300
|
transform: translateY(2px);
|
|
4249
4301
|
}
|
|
4250
4302
|
|
|
4251
|
-
|
|
4303
|
+
:where([data-slot="virtual-table-body"] > [data-slot="virtual-table-row"][data-terminal-row="true"] > [data-slot="virtual-table-cell"]) {
|
|
4304
|
+
border-block-end: 0;
|
|
4305
|
+
}
|
|
4306
|
+
|
|
4307
|
+
:where([data-slot="virtual-table"]:focus-visible, [data-slot="virtual-table-table"]:focus-visible) {
|
|
4308
|
+
outline: none;
|
|
4309
|
+
}
|
|
4310
|
+
|
|
4311
|
+
:where([data-slot="virtual-table"]:focus-visible, [data-slot="virtual-table"]:has([data-slot="virtual-table-table"]:focus-visible)) {
|
|
4312
|
+
border-color: var(--ak-color-ring);
|
|
4313
|
+
box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
|
|
4314
|
+
}
|
|
4315
|
+
|
|
4316
|
+
@media (forced-colors: active) {
|
|
4317
|
+
:where([data-slot="virtual-table"]) {
|
|
4318
|
+
border-color: canvastext;
|
|
4319
|
+
}
|
|
4320
|
+
|
|
4321
|
+
:where([data-slot="virtual-table"]:focus-visible, [data-slot="virtual-table"]:has([data-slot="virtual-table-table"]:focus-visible)) {
|
|
4322
|
+
outline-offset: 2px;
|
|
4323
|
+
box-shadow: none;
|
|
4324
|
+
outline: 2px solid highlight;
|
|
4325
|
+
}
|
|
4326
|
+
|
|
4327
|
+
:where([data-slot="virtual-table-head"]) {
|
|
4328
|
+
color: canvastext;
|
|
4329
|
+
background: canvas;
|
|
4330
|
+
box-shadow: inset 0 -1px canvastext;
|
|
4331
|
+
}
|
|
4332
|
+
|
|
4252
4333
|
:where([data-slot="virtual-table-header-cell"], [data-slot="virtual-table-cell"]) {
|
|
4253
|
-
|
|
4254
|
-
|
|
4255
|
-
|
|
4334
|
+
border-color: canvastext;
|
|
4335
|
+
}
|
|
4336
|
+
|
|
4337
|
+
:where([data-slot="virtual-table-row"][data-selected="true"]) {
|
|
4338
|
+
color: highlighttext;
|
|
4339
|
+
outline-offset: -2px;
|
|
4340
|
+
box-shadow: none;
|
|
4341
|
+
background: highlight;
|
|
4342
|
+
outline: 2px solid highlight;
|
|
4343
|
+
}
|
|
4344
|
+
|
|
4345
|
+
:where([data-slot="virtual-table-row"][data-selected="true"] > [data-slot="virtual-table-cell"]) {
|
|
4346
|
+
color: highlighttext;
|
|
4347
|
+
}
|
|
4348
|
+
|
|
4349
|
+
:where([data-slot="virtual-table-row"][data-selected="true"] > [data-slot="virtual-table-cell"]:first-child):before {
|
|
4350
|
+
background: highlighttext;
|
|
4256
4351
|
}
|
|
4257
4352
|
}
|
|
4258
4353
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@askrjs/themes",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "Default theme tokens, styles, and component presets for Askr apps.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"askr",
|
|
@@ -120,8 +120,8 @@
|
|
|
120
120
|
"test:checks": "vp test run -c vitest.test.checks.config.ts"
|
|
121
121
|
},
|
|
122
122
|
"devDependencies": {
|
|
123
|
-
"@askrjs/askr": ">=0.2.
|
|
124
|
-
"@askrjs/ui": ">=0.2.
|
|
123
|
+
"@askrjs/askr": ">=0.2.2 <0.3.0",
|
|
124
|
+
"@askrjs/ui": ">=0.2.2 <0.3.0",
|
|
125
125
|
"@askrjs/vite": ">=0.2.0 <0.3.0",
|
|
126
126
|
"@tsdown/css": "0.22.14",
|
|
127
127
|
"@types/node": "^26.2.0",
|
|
@@ -131,14 +131,14 @@
|
|
|
131
131
|
"cross-env": "^10.1.0",
|
|
132
132
|
"jsdom": "^30.0.1",
|
|
133
133
|
"playwright": "^1.62.1",
|
|
134
|
-
"publint": "^0.3.
|
|
134
|
+
"publint": "^0.3.24",
|
|
135
135
|
"tsdown": "0.22.14",
|
|
136
136
|
"typescript": "npm:@typescript/typescript6@^6.0.2",
|
|
137
|
-
"vite-plus": "^0.2.
|
|
137
|
+
"vite-plus": "^0.2.9"
|
|
138
138
|
},
|
|
139
139
|
"peerDependencies": {
|
|
140
140
|
"@askrjs/askr": ">=0.2.0 <0.3.0",
|
|
141
|
-
"@askrjs/ui": ">=0.2.
|
|
141
|
+
"@askrjs/ui": ">=0.2.2 <0.3.0"
|
|
142
142
|
},
|
|
143
143
|
"engines": {
|
|
144
144
|
"node": ">=24.0.0"
|
|
@@ -134,9 +134,16 @@ export function NavGroup(props: NavGroupProps): JSX.Element {
|
|
|
134
134
|
const { align, children, label, title = label, ...rest } = props;
|
|
135
135
|
|
|
136
136
|
return (
|
|
137
|
-
<LayoutBlock
|
|
137
|
+
<LayoutBlock
|
|
138
|
+
direction="column"
|
|
139
|
+
align={align}
|
|
140
|
+
gap="sm"
|
|
141
|
+
{...rest}
|
|
142
|
+
data-align={align}
|
|
143
|
+
data-slot="nav-group"
|
|
144
|
+
>
|
|
138
145
|
{title !== undefined ? <div data-slot="nav-group-label">{title}</div> : null}
|
|
139
|
-
<LayoutBlock gap="xs" data-slot="nav-group-body">
|
|
146
|
+
<LayoutBlock direction="column" gap="xs" data-slot="nav-group-body">
|
|
140
147
|
{children}
|
|
141
148
|
</LayoutBlock>
|
|
142
149
|
</LayoutBlock>
|