@askrjs/themes 0.0.16 → 0.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (179) hide show
  1. package/README.md +25 -0
  2. package/THEMING.md +6 -5
  3. package/dist/components/_internal/block-layout.d.ts +1 -0
  4. package/dist/components/_internal/block-layout.js +14 -11
  5. package/dist/components/_internal/block-layout.js.map +1 -1
  6. package/dist/components/_internal/classes.js +8 -1
  7. package/dist/components/_internal/classes.js.map +1 -1
  8. package/dist/components/_internal/jsx.js.map +1 -1
  9. package/dist/components/_internal/style.js +185 -28
  10. package/dist/components/_internal/style.js.map +1 -1
  11. package/dist/components/alert/alert.d.ts +1 -0
  12. package/dist/components/alert/alert.js.map +1 -1
  13. package/dist/components/alert/alert.types.d.ts +1 -0
  14. package/dist/components/aside/aside.d.ts +1 -0
  15. package/dist/components/aside/aside.js.map +1 -1
  16. package/dist/components/aspect-ratio/aspect-ratio.d.ts +1 -0
  17. package/dist/components/aspect-ratio/aspect-ratio.js.map +1 -1
  18. package/dist/components/aspect-ratio/aspect-ratio.types.d.ts +1 -0
  19. package/dist/components/badge/badge.d.ts +1 -0
  20. package/dist/components/badge/badge.js.map +1 -1
  21. package/dist/components/badge/badge.types.d.ts +1 -0
  22. package/dist/components/block/block.d.ts +1 -0
  23. package/dist/components/block/block.js +2 -2
  24. package/dist/components/block/block.js.map +1 -1
  25. package/dist/components/block/block.types.d.ts +1 -0
  26. package/dist/components/brand/brand.d.ts +1 -0
  27. package/dist/components/brand/brand.js +2 -2
  28. package/dist/components/brand/brand.js.map +1 -1
  29. package/dist/components/brand/brand.types.d.ts +1 -0
  30. package/dist/components/button-group/button-group.d.ts +1 -0
  31. package/dist/components/button-group/button-group.js.map +1 -1
  32. package/dist/components/button-group/button-group.types.d.ts +1 -0
  33. package/dist/components/card/card.d.ts +1 -0
  34. package/dist/components/card/card.js.map +1 -1
  35. package/dist/components/card/card.types.d.ts +1 -0
  36. package/dist/components/catalog.d.ts +1 -0
  37. package/dist/components/catalog.js +22 -13
  38. package/dist/components/catalog.js.map +1 -1
  39. package/dist/components/close/close.d.ts +1 -0
  40. package/dist/components/close/close.js.map +1 -1
  41. package/dist/components/container/container.d.ts +1 -0
  42. package/dist/components/container/container.js.map +1 -1
  43. package/dist/components/empty-state/empty-state.d.ts +1 -0
  44. package/dist/components/empty-state/empty-state.js.map +1 -1
  45. package/dist/components/field/field.d.ts +1 -0
  46. package/dist/components/field/field.js.map +1 -1
  47. package/dist/components/field/field.types.d.ts +1 -0
  48. package/dist/components/footer/footer.d.ts +1 -0
  49. package/dist/components/footer/footer.js.map +1 -1
  50. package/dist/components/footer/footer.types.d.ts +1 -0
  51. package/dist/components/grid/grid.d.ts +1 -0
  52. package/dist/components/grid/grid.js.map +1 -1
  53. package/dist/components/grid/grid.types.d.ts +1 -0
  54. package/dist/components/header/header.d.ts +1 -0
  55. package/dist/components/header/header.js.map +1 -1
  56. package/dist/components/input-group/input-group.d.ts +1 -0
  57. package/dist/components/input-group/input-group.js.map +1 -1
  58. package/dist/components/input-group/input-group.types.d.ts +1 -0
  59. package/dist/components/jsx-types.d.ts +12 -0
  60. package/dist/components/main/main.d.ts +1 -0
  61. package/dist/components/main/main.js.map +1 -1
  62. package/dist/components/nav/nav.d.ts +1 -0
  63. package/dist/components/nav/nav.js +6 -2
  64. package/dist/components/nav/nav.js.map +1 -1
  65. package/dist/components/nav/nav.types.d.ts +2 -0
  66. package/dist/components/navbar/navbar.d.ts +1 -0
  67. package/dist/components/navbar/navbar.js +15 -10
  68. package/dist/components/navbar/navbar.js.map +1 -1
  69. package/dist/components/overlays/dropdown-content.d.ts +1 -0
  70. package/dist/components/overlays/dropdown-content.js.map +1 -1
  71. package/dist/components/page/page.d.ts +1 -0
  72. package/dist/components/page/page.js.map +1 -1
  73. package/dist/components/page-header/page-header.d.ts +1 -0
  74. package/dist/components/page-header/page-header.js.map +1 -1
  75. package/dist/components/section/section.d.ts +1 -0
  76. package/dist/components/section/section.js.map +1 -1
  77. package/dist/components/separator/separator.d.ts +1 -0
  78. package/dist/components/separator/separator.js.map +1 -1
  79. package/dist/components/separator/separator.types.d.ts +1 -0
  80. package/dist/components/sidebar/index.d.ts +2 -2
  81. package/dist/components/sidebar/sidebar.d.ts +2 -1
  82. package/dist/components/sidebar/sidebar.js +39 -13
  83. package/dist/components/sidebar/sidebar.js.map +1 -1
  84. package/dist/components/sidebar/sidebar.types.d.ts +3 -1
  85. package/dist/components/skeleton/skeleton.d.ts +1 -0
  86. package/dist/components/skeleton/skeleton.js.map +1 -1
  87. package/dist/components/skeleton/skeleton.types.d.ts +1 -0
  88. package/dist/components/spinner/spinner.d.ts +1 -0
  89. package/dist/components/spinner/spinner.js.map +1 -1
  90. package/dist/components/stat/stat.d.ts +1 -0
  91. package/dist/components/stat/stat.js.map +1 -1
  92. package/dist/components/stat/stat.types.d.ts +1 -0
  93. package/dist/components/text/text.d.ts +1 -0
  94. package/dist/components/text/text.js.map +1 -1
  95. package/dist/components/text/text.types.d.ts +1 -0
  96. package/dist/components/theme/theme.d.ts +2 -0
  97. package/dist/components/theme/theme.js +58 -19
  98. package/dist/components/theme/theme.js.map +1 -1
  99. package/dist/components/toolbar/toolbar.d.ts +1 -0
  100. package/dist/components/toolbar/toolbar.js.map +1 -1
  101. package/dist/components.d.ts +6 -3
  102. package/dist/core.d.ts +2 -2
  103. package/dist/ssr.d.ts +18 -0
  104. package/dist/ssr.js +63 -0
  105. package/dist/ssr.js.map +1 -0
  106. package/dist/themes/default/index.css +43 -7
  107. package/package.json +7 -3
  108. package/src/components/_internal/block-layout.ts +27 -16
  109. package/src/components/_internal/classes.ts +15 -2
  110. package/src/components/_internal/jsx.ts +1 -1
  111. package/src/components/_internal/style.ts +248 -27
  112. package/src/components/alert/alert.tsx +1 -0
  113. package/src/components/alert/alert.types.ts +1 -0
  114. package/src/components/aside/aside.tsx +1 -0
  115. package/src/components/aspect-ratio/aspect-ratio.tsx +1 -0
  116. package/src/components/aspect-ratio/aspect-ratio.types.ts +1 -0
  117. package/src/components/badge/badge.tsx +1 -0
  118. package/src/components/badge/badge.types.ts +1 -0
  119. package/src/components/block/block.tsx +4 -1
  120. package/src/components/block/block.types.ts +1 -0
  121. package/src/components/brand/brand.tsx +6 -2
  122. package/src/components/brand/brand.types.ts +1 -0
  123. package/src/components/button-group/button-group.tsx +1 -0
  124. package/src/components/button-group/button-group.types.ts +1 -0
  125. package/src/components/card/card.tsx +1 -0
  126. package/src/components/card/card.types.ts +1 -0
  127. package/src/components/catalog.tsx +15 -4
  128. package/src/components/close/close.tsx +1 -0
  129. package/src/components/container/container.tsx +1 -0
  130. package/src/components/empty-state/empty-state.tsx +1 -0
  131. package/src/components/field/field.tsx +1 -0
  132. package/src/components/field/field.types.ts +1 -0
  133. package/src/components/footer/footer.tsx +1 -0
  134. package/src/components/footer/footer.types.ts +1 -0
  135. package/src/components/grid/grid.tsx +1 -0
  136. package/src/components/grid/grid.types.ts +1 -0
  137. package/src/components/header/header.tsx +1 -0
  138. package/src/components/input-group/input-group.tsx +1 -0
  139. package/src/components/input-group/input-group.types.ts +1 -0
  140. package/src/components/jsx-types.ts +16 -0
  141. package/src/components/main/main.tsx +1 -0
  142. package/src/components/nav/nav.tsx +16 -2
  143. package/src/components/nav/nav.types.ts +2 -0
  144. package/src/components/navbar/navbar.tsx +19 -8
  145. package/src/components/overlays/dropdown-content.tsx +1 -0
  146. package/src/components/page/page.tsx +1 -0
  147. package/src/components/page-header/page-header.tsx +1 -0
  148. package/src/components/section/section.tsx +1 -0
  149. package/src/components/separator/separator.tsx +1 -0
  150. package/src/components/separator/separator.types.ts +1 -0
  151. package/src/components/sidebar/index.ts +1 -0
  152. package/src/components/sidebar/sidebar.tsx +45 -20
  153. package/src/components/sidebar/sidebar.types.ts +3 -0
  154. package/src/components/skeleton/skeleton.tsx +1 -0
  155. package/src/components/skeleton/skeleton.types.ts +1 -0
  156. package/src/components/spinner/spinner.tsx +1 -0
  157. package/src/components/stat/stat.tsx +1 -0
  158. package/src/components/stat/stat.types.ts +1 -0
  159. package/src/components/text/text.tsx +1 -0
  160. package/src/components/text/text.types.ts +1 -0
  161. package/src/components/theme/theme.tsx +85 -14
  162. package/src/components/toolbar/toolbar.tsx +1 -0
  163. package/src/components.ts +9 -0
  164. package/src/ssr.ts +102 -0
  165. package/src/themes/default/styles/base/text.css +4 -4
  166. package/src/themes/default/styles/display/coverage.css +3 -1
  167. package/src/themes/default/styles/layout/block.css +4 -0
  168. package/src/themes/default/styles/layout/layout.css +108 -0
  169. package/src/themes/default/styles/shell/navbar.css +4 -1
  170. package/src/themes/default/tokens.css +1 -1
  171. package/src/themes/presets/ginger.css +3 -3
  172. package/templates/theme/styles/base/text.css +4 -4
  173. package/templates/theme/styles/display/progress-circle.css +2 -0
  174. package/templates/theme/styles/forms/input-group.css +2 -1
  175. package/templates/theme/styles/layout/layout.css +108 -0
  176. package/templates/theme/styles/overlays/toast.css +11 -0
  177. package/templates/theme/styles/shell/navbar.css +4 -1
  178. package/templates/theme/styles/shell/sidebar.css +18 -1
  179. package/templates/theme/tokens.css +1 -1
package/dist/ssr.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ssr.js","names":[],"sources":["../src/ssr.ts"],"sourcesContent":["import { styleRulesForHtml } from \"./components/_internal/style\";\n\nconst STYLE_REGISTRY_ATTR = \"data-askr-style-registry\";\n\ntype DocumentRenderArgsLike = {\n appHtml: string;\n context: {\n cspNonce?: string;\n styles?: readonly { id: string; cssText: string }[];\n };\n};\n\nfunction escapeHtmlAttribute(value: string): string {\n return value\n .replace(/&/g, \"&amp;\")\n .replace(/\"/g, \"&quot;\")\n .replace(/</g, \"&lt;\")\n .replace(/>/g, \"&gt;\");\n}\n\nfunction escapeStyleRawText(value: string): string {\n return value.replace(/<\\/style/gi, \"<\\\\/style\");\n}\n\nfunction findHeadEnd(html: string): number {\n let index = 0;\n while (index < html.length) {\n if (html.startsWith(\"<!--\", index)) {\n const commentEnd = html.indexOf(\"-->\", index + 4);\n index = commentEnd < 0 ? html.length : commentEnd + 3;\n continue;\n }\n\n const rawTextStart = html.slice(index).match(/^<\\s*(script|style|title|textarea)(?:\\s|>)/i);\n if (rawTextStart) {\n const rawTextEndPattern = new RegExp(`</\\\\s*${rawTextStart[1]}\\\\s*>`, \"ig\");\n rawTextEndPattern.lastIndex = index + rawTextStart[0].length;\n const rawTextEnd = rawTextEndPattern.exec(html);\n if (!rawTextEnd) return -1;\n index = rawTextEnd.index + rawTextEnd[0].length;\n continue;\n }\n\n const headEnd = html.slice(index).match(/^<\\/\\s*head\\s*>/i);\n if (headEnd) return index;\n index += 1;\n }\n return -1;\n}\n\nfunction injectIntoHead(html: string, content: string): string {\n const headEnd = findHeadEnd(html);\n if (headEnd >= 0) {\n return `${html.slice(0, headEnd)}${content}${html.slice(headEnd)}`;\n }\n\n const bodyStart = html.search(/<body(?:\\s[^>]*)?>/i);\n if (bodyStart >= 0) {\n return `${html.slice(0, bodyStart)}<head>${content}</head>${html.slice(bodyStart)}`;\n }\n\n return `${content}${html}`;\n}\n\n/**\n * Wrap an Askr SSR/SSG document renderer so generated theme rules used by the\n * rendered app are available before hydration.\n */\nexport function withThemeStyles<TArgs extends DocumentRenderArgsLike>(\n documentRenderer: (args: TArgs) => string,\n): (args: TArgs) => string {\n return (args) => {\n const documentHtml = documentRenderer(args);\n const registeredStyles = args.context.styles;\n const rules = registeredStyles\n ? (() => {\n const styles = new Map<string, string>();\n for (const style of registeredStyles) {\n if (!style.id || !style.cssText) {\n throw new TypeError(\"Invalid SSR theme style registration.\");\n }\n const existing = styles.get(style.id);\n if (existing !== undefined && existing !== style.cssText) {\n throw new RangeError(\n `SSR style registration collision for ${JSON.stringify(style.id)}.`,\n );\n }\n styles.set(style.id, style.cssText);\n }\n return Array.from(styles.values());\n })()\n : styleRulesForHtml(args.appHtml);\n if (rules.length === 0) return documentHtml;\n\n const nonce =\n args.context.cspNonce === undefined\n ? \"\"\n : ` nonce=\"${escapeHtmlAttribute(args.context.cspNonce)}\"`;\n const registry = `<style ${STYLE_REGISTRY_ATTR}=\"true\"${nonce}>${escapeStyleRawText(rules.join(\"\\n\"))}\\n</style>`;\n return injectIntoHead(documentHtml, registry);\n };\n}\n"],"mappings":";;AAEA,MAAM,sBAAsB;AAU5B,SAAS,oBAAoB,OAAuB;CAClD,OAAO,MACJ,QAAQ,MAAM,OAAO,CAAC,CACtB,QAAQ,MAAM,QAAQ,CAAC,CACvB,QAAQ,MAAM,MAAM,CAAC,CACrB,QAAQ,MAAM,MAAM;AACzB;AAEA,SAAS,mBAAmB,OAAuB;CACjD,OAAO,MAAM,QAAQ,cAAc,WAAW;AAChD;AAEA,SAAS,YAAY,MAAsB;CACzC,IAAI,QAAQ;CACZ,OAAO,QAAQ,KAAK,QAAQ;EAC1B,IAAI,KAAK,WAAW,QAAQ,KAAK,GAAG;GAClC,MAAM,aAAa,KAAK,QAAQ,OAAO,QAAQ,CAAC;GAChD,QAAQ,aAAa,IAAI,KAAK,SAAS,aAAa;GACpD;EACF;EAEA,MAAM,eAAe,KAAK,MAAM,KAAK,CAAC,CAAC,MAAM,6CAA6C;EAC1F,IAAI,cAAc;GAChB,MAAM,oBAAoB,IAAI,OAAO,SAAS,aAAa,GAAG,QAAQ,IAAI;GAC1E,kBAAkB,YAAY,QAAQ,aAAa,EAAE,CAAC;GACtD,MAAM,aAAa,kBAAkB,KAAK,IAAI;GAC9C,IAAI,CAAC,YAAY,OAAO;GACxB,QAAQ,WAAW,QAAQ,WAAW,EAAE,CAAC;GACzC;EACF;EAGA,IADgB,KAAK,MAAM,KAAK,CAAC,CAAC,MAAM,kBAC9B,GAAG,OAAO;EACpB,SAAS;CACX;CACA,OAAO;AACT;AAEA,SAAS,eAAe,MAAc,SAAyB;CAC7D,MAAM,UAAU,YAAY,IAAI;CAChC,IAAI,WAAW,GACb,OAAO,GAAG,KAAK,MAAM,GAAG,OAAO,IAAI,UAAU,KAAK,MAAM,OAAO;CAGjE,MAAM,YAAY,KAAK,OAAO,qBAAqB;CACnD,IAAI,aAAa,GACf,OAAO,GAAG,KAAK,MAAM,GAAG,SAAS,EAAE,QAAQ,QAAQ,SAAS,KAAK,MAAM,SAAS;CAGlF,OAAO,GAAG,UAAU;AACtB;;;;;AAMA,SAAgB,gBACd,kBACyB;CACzB,QAAQ,SAAS;EACf,MAAM,eAAe,iBAAiB,IAAI;EAC1C,MAAM,mBAAmB,KAAK,QAAQ;EACtC,MAAM,QAAQ,0BACH;GACL,MAAM,yBAAS,IAAI,IAAoB;GACvC,KAAK,MAAM,SAAS,kBAAkB;IACpC,IAAI,CAAC,MAAM,MAAM,CAAC,MAAM,SACtB,MAAM,IAAI,UAAU,uCAAuC;IAE7D,MAAM,WAAW,OAAO,IAAI,MAAM,EAAE;IACpC,IAAI,aAAa,KAAA,KAAa,aAAa,MAAM,SAC/C,MAAM,IAAI,WACR,wCAAwC,KAAK,UAAU,MAAM,EAAE,EAAE,EACnE;IAEF,OAAO,IAAI,MAAM,IAAI,MAAM,OAAO;GACpC;GACA,OAAO,MAAM,KAAK,OAAO,OAAO,CAAC;EACnC,EAAA,CAAG,IACH,kBAAkB,KAAK,OAAO;EAClC,IAAI,MAAM,WAAW,GAAG,OAAO;EAE/B,MAAM,QACJ,KAAK,QAAQ,aAAa,KAAA,IACtB,KACA,WAAW,oBAAoB,KAAK,QAAQ,QAAQ,EAAE;EAE5D,OAAO,eAAe,cAAc,UADT,oBAAoB,SAAS,MAAM,GAAG,mBAAmB,MAAM,KAAK,IAAI,CAAC,EAAE,WAC1D;CAC9C;AACF"}
package/dist/themes/default/index.css CHANGED
@@ -160,7 +160,7 @@
160
160
  --ak-dark-color-primary-hover: color-mix(in oklch, var(--ak-dark-color-primary) 90%, transparent);
161
161
  --ak-dark-color-primary-active: color-mix(in oklch, var(--ak-dark-color-primary) 84%, black);
162
162
  --ak-dark-color-primary-soft: oklch(26.9% 0 0);
163
- --ak-dark-color-primary-ink: oklch(20.5% 0 0);
163
+ --ak-dark-color-primary-ink: oklch(98.5% 0 0);
164
164
  --ak-dark-color-text: oklch(98.5% 0 0);
165
165
  --ak-dark-color-text-muted: oklch(70.8% 0 0);
166
166
  --ak-dark-color-text-subtle: oklch(55.6% 0 0);
@@ -573,19 +573,19 @@
573
573
  }
574
574
 
575
575
  :where([data-slot="text"][data-tone="success"]) {
576
- color: var(--ak-color-success);
576
+ color: var(--ak-color-success-ink);
577
577
  }
578
578
 
579
579
  :where([data-slot="text"][data-tone="warning"]) {
580
- color: var(--ak-color-warning);
580
+ color: var(--ak-color-warning-ink);
581
581
  }
582
582
 
583
583
  :where([data-slot="text"][data-tone="danger"]) {
584
- color: var(--ak-color-danger);
584
+ color: var(--ak-color-danger-ink);
585
585
  }
586
586
 
587
587
  :where([data-slot="text"][data-tone="info"]) {
588
- color: var(--ak-color-info);
588
+ color: var(--ak-color-info-ink);
589
589
  }
590
590
 
591
591
  :where([data-slot="text"][data-weight="normal"]) {
@@ -678,10 +678,12 @@
678
678
  --ak-flex-grow-sm: var(--ak-flex-grow-base);
679
679
  --ak-flex-grow-md: var(--ak-flex-grow-sm);
680
680
  --ak-flex-grow-lg: var(--ak-flex-grow-md);
681
+ --ak-flex-grow-xl: var(--ak-flex-grow-lg);
681
682
  --ak-flex-shrink-base: 1;
682
683
  --ak-flex-shrink-sm: var(--ak-flex-shrink-base);
683
684
  --ak-flex-shrink-md: var(--ak-flex-shrink-sm);
684
685
  --ak-flex-shrink-lg: var(--ak-flex-shrink-md);
686
+ --ak-flex-shrink-xl: var(--ak-flex-shrink-lg);
685
687
  --ak-flex-basis-base: auto;
686
688
  --ak-flex-basis-sm: var(--ak-flex-basis-base);
687
689
  --ak-flex-basis-md: var(--ak-flex-basis-sm);
@@ -690,24 +692,32 @@
690
692
  --ak-min-width-sm: var(--ak-min-width-base);
691
693
  --ak-min-width-md: var(--ak-min-width-sm);
692
694
  --ak-min-width-lg: var(--ak-min-width-md);
695
+ --ak-min-width-xl: var(--ak-min-width-lg);
693
696
  --ak-max-width-base: none;
694
697
  --ak-max-width-sm: var(--ak-max-width-base);
695
698
  --ak-max-width-md: var(--ak-max-width-sm);
696
699
  --ak-max-width-lg: var(--ak-max-width-md);
700
+ --ak-max-width-xl: var(--ak-max-width-lg);
697
701
  --ak-width-base: auto;
698
702
  --ak-width-sm: var(--ak-width-base);
699
703
  --ak-width-md: var(--ak-width-sm);
700
704
  --ak-width-lg: var(--ak-width-md);
705
+ --ak-width-xl: var(--ak-width-lg);
701
706
  --ak-min-height-base: auto;
702
707
  --ak-min-height-sm: var(--ak-min-height-base);
703
708
  --ak-min-height-md: var(--ak-min-height-sm);
704
709
  --ak-min-height-lg: var(--ak-min-height-md);
710
+ --ak-min-height-xl: var(--ak-min-height-lg);
705
711
  --ak-max-height-base: none;
706
712
  --ak-max-height-sm: var(--ak-max-height-base);
713
+ --ak-max-height-md: var(--ak-max-height-sm);
714
+ --ak-max-height-lg: var(--ak-max-height-md);
715
+ --ak-max-height-xl: var(--ak-max-height-lg);
707
716
  --ak-height-base: auto;
708
717
  --ak-height-sm: var(--ak-height-base);
709
718
  --ak-height-md: var(--ak-height-sm);
710
719
  --ak-height-lg: var(--ak-height-md);
720
+ --ak-height-xl: var(--ak-height-lg);
711
721
  --ak-m-base: 0;
712
722
  --ak-m-sm: var(--ak-m-base);
713
723
  --ak-m-md: var(--ak-m-sm);
@@ -762,6 +772,12 @@
762
772
  --ak-border-sm: var(--ak-border-base);
763
773
  --ak-border-md: var(--ak-border-sm);
764
774
  --ak-border-lg: var(--ak-border-md);
775
+ --ak-border-xl: var(--ak-border-lg);
776
+ --ak-border-top-base: var(--ak-border-base);
777
+ --ak-border-top-sm: var(--ak-border-top-base);
778
+ --ak-border-top-md: var(--ak-border-top-sm);
779
+ --ak-border-top-lg: var(--ak-border-top-md);
780
+ --ak-border-top-xl: var(--ak-border-top-lg);
765
781
  --ak-border-bottom-base: var(--ak-border-base);
766
782
  --ak-border-bottom-sm: var(--ak-border-bottom-base);
767
783
  --ak-border-bottom-md: var(--ak-border-bottom-sm);
@@ -770,6 +786,7 @@
770
786
  --ak-border-right-sm: var(--ak-border-right-base);
771
787
  --ak-border-right-md: var(--ak-border-right-sm);
772
788
  --ak-border-right-lg: var(--ak-border-right-md);
789
+ --ak-border-right-xl: var(--ak-border-right-lg);
773
790
  --ak-border-radius-base: 0;
774
791
  --ak-border-radius-sm: var(--ak-border-radius-base);
775
792
  --ak-border-radius-md: var(--ak-border-radius-sm);
@@ -778,10 +795,12 @@
778
795
  --ak-background-sm: var(--ak-background-base);
779
796
  --ak-background-md: var(--ak-background-sm);
780
797
  --ak-background-lg: var(--ak-background-md);
798
+ --ak-background-xl: var(--ak-background-lg);
781
799
  --ak-box-shadow-base: none;
782
800
  --ak-box-shadow-sm: var(--ak-box-shadow-base);
783
801
  --ak-box-shadow-md: var(--ak-box-shadow-sm);
784
802
  --ak-box-shadow-lg: var(--ak-box-shadow-md);
803
+ --ak-box-shadow-xl: var(--ak-box-shadow-lg);
785
804
  box-sizing: border-box;
786
805
  display: var(--ak-display-base, flex);
787
806
  flex-direction: var(--ak-flex-direction-base, column);
@@ -815,6 +834,7 @@
815
834
  overflow-x: var(--ak-overflow-x-base, var(--ak-overflow-base, visible));
816
835
  overflow-y: var(--ak-overflow-y-base, var(--ak-overflow-base, visible));
817
836
  border: var(--ak-border-base, 0 solid transparent);
837
+ border-top: var(--ak-border-top-base, var(--ak-border-base, 0 solid transparent));
818
838
  border-bottom: var(--ak-border-bottom-base, var(--ak-border-base, 0 solid transparent));
819
839
  border-right: var(--ak-border-right-base, var(--ak-border-base, 0 solid transparent));
820
840
  border-radius: var(--ak-border-radius-base, 0);
@@ -856,6 +876,7 @@
856
876
  overflow-x: var(--ak-overflow-x-sm, var(--ak-overflow-x-base, var(--ak-overflow-sm, var(--ak-overflow-base, visible))));
857
877
  overflow-y: var(--ak-overflow-y-sm, var(--ak-overflow-y-base, var(--ak-overflow-sm, var(--ak-overflow-base, visible))));
858
878
  border: var(--ak-border-sm, var(--ak-border-base, 0 solid transparent));
879
+ border-top: var(--ak-border-top-sm, var(--ak-border-top-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))));
859
880
  border-bottom: var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))));
860
881
  border-right: var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))));
861
882
  border-radius: var(--ak-border-radius-sm, var(--ak-border-radius-base, 0));
@@ -877,6 +898,7 @@
877
898
  max-width: var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none)));
878
899
  width: var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto)));
879
900
  min-height: var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)));
901
+ max-height: var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-base, none)));
880
902
  height: var(--ak-height-md, var(--ak-height-sm, var(--ak-height-base, auto)));
881
903
  margin: var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)));
882
904
  margin-inline: var(--ak-mx-md, var(--ak-mx-sm, var(--ak-mx-base, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0))))));
@@ -888,6 +910,7 @@
888
910
  top: var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto)));
889
911
  z-index: var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto)));
890
912
  border: var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)));
913
+ 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, 0 solid transparent))))));
891
914
  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, 0 solid transparent))))));
892
915
  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, 0 solid transparent))))));
893
916
  border-radius: var(--ak-border-radius-md, var(--ak-border-radius-sm, var(--ak-border-radius-base, 0)));
@@ -920,6 +943,7 @@
920
943
  top: var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto))));
921
944
  z-index: var(--ak-z-index-lg, var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto))));
922
945
  border: var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))));
946
+ 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, 0 solid transparent))))))));
923
947
  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, 0 solid transparent))))))));
924
948
  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, 0 solid transparent))))))));
925
949
  border-radius: var(--ak-border-radius-lg, var(--ak-border-radius-md, var(--ak-border-radius-sm, var(--ak-border-radius-base, 0))));
@@ -935,9 +959,14 @@
935
959
  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, stretch)))));
936
960
  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, flex-start)))));
937
961
  gap: var(--ak-gap-xl, var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, 0)))));
962
+ 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)))));
963
+ 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)))));
964
+ 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, 0)))));
938
965
  width: var(--ak-width-xl, var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto)))));
939
966
  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)))));
940
967
  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)))));
968
+ max-height: var(--ak-max-height-xl, var(--ak-max-height-lg, var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-base, none)))));
969
+ height: var(--ak-height-xl, var(--ak-height-lg, var(--ak-height-md, var(--ak-height-sm, var(--ak-height-base, auto)))));
941
970
  margin: var(--ak-m-xl, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)))));
942
971
  margin-inline: var(--ak-mx-xl, var(--ak-mx-lg, var(--ak-mx-md, var(--ak-mx-sm, var(--ak-mx-base, var(--ak-m-xl, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0))))))))));
943
972
  margin-block: var(--ak-my-xl, var(--ak-my-lg, var(--ak-my-md, var(--ak-my-sm, var(--ak-my-base, var(--ak-m-xl, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0))))))))));
@@ -948,6 +977,7 @@
948
977
  top: var(--ak-top-xl, var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto)))));
949
978
  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)))));
950
979
  border: var(--ak-border-xl, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))));
980
+ 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, 0 solid transparent))))))))));
951
981
  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, 0 solid transparent))))))))));
952
982
  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, 0 solid transparent))))))))));
953
983
  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)))));
@@ -981,16 +1011,20 @@
981
1011
  }
982
1012
 
983
1013
  :where([data-slot="nav-group-label"]) {
1014
+ max-inline-size: 100%;
984
1015
  color: var(--ak-color-text-muted);
985
1016
  font-size: var(--ak-font-size-xs);
986
1017
  font-weight: var(--ak-font-weight-medium);
987
1018
  line-height: var(--ak-line-height-tight);
1019
+ overflow-wrap: anywhere;
988
1020
  margin: 0;
989
1021
  }
990
1022
 
991
1023
  :where([data-slot="nav-item"]) {
992
1024
  min-block-size: 2rem;
1025
+ max-inline-size: 100%;
993
1026
  color: var(--ak-color-text-muted);
1027
+ white-space: normal;
994
1028
  transition: background var(--ak-duration-fast) var(--ak-ease-standard),
995
1029
  color var(--ak-duration-fast) var(--ak-ease-standard);
996
1030
  text-decoration: none;
@@ -1421,7 +1455,7 @@
1421
1455
  display: inline-flex;
1422
1456
  }
1423
1457
 
1424
- :where([data-slot="navbar"][data-collapse-at]) :where([data-slot="navbar-collapse"][open] [data-slot="navbar-content"]) {
1458
+ :where([data-slot="navbar"][data-collapse-at]) :where([data-slot="navbar-collapse"] [data-slot="navbar-content"][data-state="open"], [data-slot="navbar-collapse"][open] [data-slot="navbar-content"]) {
1425
1459
  display: flex;
1426
1460
  }
1427
1461
 
@@ -4300,7 +4334,9 @@
4300
4334
  }
4301
4335
 
4302
4336
  :where([data-slot="theme-picker"]) {
4303
- min-block-size: var(--ak-density-control-height-md);
4337
+ appearance: none;
4338
+ block-size: var(--ak-density-control-height-md, 2.25rem);
4339
+ min-block-size: var(--ak-density-control-height-md, 2.25rem);
4304
4340
  min-inline-size: min(8rem, 100%);
4305
4341
  max-inline-size: 100%;
4306
4342
  padding-inline: var(--ak-density-control-padding-x-md) 2.1rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@askrjs/themes",
3
- "version": "0.0.16",
3
+ "version": "0.0.19",
4
4
  "description": "Default theme tokens, styles, and component presets for Askr apps.",
5
5
  "keywords": [
6
6
  "askr",
@@ -54,6 +54,10 @@
54
54
  "types": "./dist/theme.d.ts",
55
55
  "import": "./dist/theme.js"
56
56
  },
57
+ "./ssr": {
58
+ "types": "./dist/ssr.d.ts",
59
+ "import": "./dist/ssr.js"
60
+ },
57
61
  "./accordion": {
58
62
  "types": "./dist/components.d.ts",
59
63
  "import": "./dist/components.js"
@@ -329,7 +333,7 @@
329
333
  },
330
334
  "devDependencies": {
331
335
  "@askrjs/askr": ">=0.0.64 <0.1.0",
332
- "@askrjs/ui": ">=0.0.12 <0.1.0",
336
+ "@askrjs/ui": ">=0.0.13 <0.1.0",
333
337
  "@askrjs/vite": ">=0.0.5 <0.1.0",
334
338
  "@tsdown/css": "0.22.8",
335
339
  "@types/node": "^26.0.0",
@@ -343,7 +347,7 @@
343
347
  },
344
348
  "peerDependencies": {
345
349
  "@askrjs/askr": ">=0.0.64 <0.1.0",
346
- "@askrjs/ui": ">=0.0.12 <0.1.0"
350
+ "@askrjs/ui": ">=0.0.13 <0.1.0"
347
351
  },
348
352
  "engines": {
349
353
  "node": ">=18"
package/src/components/_internal/block-layout.ts CHANGED
@@ -66,6 +66,7 @@ export type BlockLayoutProps = {
66
66
  zIndex?: ResponsiveValue<BlockZIndex>;
67
67
  background?: ResponsiveValue<BlockBackground>;
68
68
  border?: ResponsiveValue<boolean>;
69
+ borderTop?: ResponsiveValue<boolean>;
69
70
  borderBottom?: ResponsiveValue<boolean>;
70
71
  borderRight?: ResponsiveValue<boolean>;
71
72
  radius?: ResponsiveValue<BlockRadius>;
@@ -163,6 +164,7 @@ const BLOCK_LAYOUT_KEYS = new Set<keyof BlockLayoutProps>([
163
164
  "zIndex",
164
165
  "background",
165
166
  "border",
167
+ "borderTop",
166
168
  "borderBottom",
167
169
  "borderRight",
168
170
  "radius",
@@ -202,7 +204,8 @@ function resolveSpaceValue(value: string | number): string | number {
202
204
  return resolveTokenValue(value, SPACE_TOKEN_MAP);
203
205
  }
204
206
 
205
- function resolveSizeValue(value: string): string {
207
+ function resolveSizeValue(value: string, axis: "inline" | "block"): string {
208
+ if (value === "screen") return axis === "inline" ? "100dvw" : "100dvh";
206
209
  return String(resolveTokenValue(value, SIZE_TOKEN_MAP));
207
210
  }
208
211
 
@@ -289,31 +292,38 @@ export function applyBlockLayoutStyles(
289
292
  setResponsiveVar(styles, "mx", props.marginX, resolveSpaceValue);
290
293
  setResponsiveVar(styles, "my", props.marginY, resolveSpaceValue);
291
294
 
292
- setResponsiveVar(styles, "width", props.width, resolveSizeValue);
293
- setResponsiveVar(styles, "min-width", props.minWidth, resolveSizeValue);
294
- setResponsiveVar(styles, "max-width", props.maxWidth, resolveSizeValue);
295
- setResponsiveVar(styles, "height", props.height, resolveSizeValue);
296
- setResponsiveVar(styles, "min-height", props.minHeight, resolveSizeValue);
297
- setResponsiveVar(styles, "max-height", props.maxHeight, resolveSizeValue);
295
+ setResponsiveVar(styles, "width", props.width, (value) => resolveSizeValue(value, "inline"));
296
+ setResponsiveVar(styles, "min-width", props.minWidth, (value) =>
297
+ resolveSizeValue(value, "inline"),
298
+ );
299
+ setResponsiveVar(styles, "max-width", props.maxWidth, (value) =>
300
+ resolveSizeValue(value, "inline"),
301
+ );
302
+ setResponsiveVar(styles, "height", props.height, (value) => resolveSizeValue(value, "block"));
303
+ setResponsiveVar(styles, "min-height", props.minHeight, (value) =>
304
+ resolveSizeValue(value, "block"),
305
+ );
306
+ setResponsiveVar(styles, "max-height", props.maxHeight, (value) =>
307
+ resolveSizeValue(value, "block"),
308
+ );
298
309
 
299
310
  if (props.rowFrom !== undefined) {
300
311
  styles[`--ak-flex-direction-${props.rowFrom}`] = "row";
301
312
  }
302
- setResponsiveVar(styles, "flex-direction", props.direction, (value) => value);
303
- setResponsiveVar(styles, "align-items", props.align, resolveAlignValue);
304
- setResponsiveVar(styles, "justify-content", props.justify, resolveJustifyValue);
305
- setResponsiveVar(styles, "gap", props.gap, resolveSpaceValue);
306
- setResponsiveVar(styles, "flex-grow", props.grow, resolveFlexFlag);
307
- setResponsiveVar(styles, "flex-shrink", props.shrink, resolveFlexFlag);
308
-
309
313
  if (props.center !== undefined) {
310
314
  setResponsiveVar(styles, "align-items", props.center, (value) =>
311
- value ? "center" : undefined,
315
+ value ? "center" : "stretch",
312
316
  );
313
317
  setResponsiveVar(styles, "justify-content", props.center, (value) =>
314
- value ? "center" : undefined,
318
+ value ? "center" : "flex-start",
315
319
  );
316
320
  }
321
+ setResponsiveVar(styles, "flex-direction", props.direction, (value) => value);
322
+ setResponsiveVar(styles, "align-items", props.align, resolveAlignValue);
323
+ setResponsiveVar(styles, "justify-content", props.justify, resolveJustifyValue);
324
+ setResponsiveVar(styles, "gap", props.gap, resolveSpaceValue);
325
+ setResponsiveVar(styles, "flex-grow", props.grow, resolveFlexFlag);
326
+ setResponsiveVar(styles, "flex-shrink", props.shrink, resolveFlexFlag);
317
327
 
318
328
  if (props.sticky) {
319
329
  styles["--ak-position-base"] = "sticky";
@@ -327,6 +337,7 @@ export function applyBlockLayoutStyles(
327
337
  String(resolveTokenValue(value, BACKGROUND_TOKEN_MAP)),
328
338
  );
329
339
  setResponsiveVar(styles, "border", props.border, resolveBorderValue);
340
+ setResponsiveVar(styles, "border-top", props.borderTop, resolveBorderValue);
330
341
  setResponsiveVar(styles, "border-bottom", props.borderBottom, resolveBorderValue);
331
342
  setResponsiveVar(styles, "border-right", props.borderRight, resolveBorderValue);
332
343
  setResponsiveVar(styles, "border-radius", props.radius, resolveRadiusValue);
package/src/components/_internal/classes.ts CHANGED
@@ -1,5 +1,18 @@
1
- export function classes(...values: Array<unknown>): string | undefined {
2
- const value = values.filter((item) => typeof item === "string" && item.trim()).join(" ");
1
+ export type ClassAccessor = () => string | undefined;
3
2
 
3
+ function readClassValue(value: unknown): string | undefined {
4
+ const resolved = typeof value === "function" ? (value as () => unknown)() : value;
5
+ return typeof resolved === "string" && resolved.trim() ? resolved.trim() : undefined;
6
+ }
7
+
8
+ export function classes(...values: Array<unknown>): string | ClassAccessor | undefined {
9
+ if (values.some((value) => typeof value === "function")) {
10
+ return () => {
11
+ const value = values.map(readClassValue).filter(Boolean).join(" ");
12
+ return value || undefined;
13
+ };
14
+ }
15
+
16
+ const value = values.map(readClassValue).filter(Boolean).join(" ");
4
17
  return value || undefined;
5
18
  }
package/src/components/_internal/jsx.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { JSXElement } from "@askrjs/askr/foundations";
2
- import { jsx } from "@askrjs/askr/jsx-runtime";
2
+ import { jsx, type JSX } from "@askrjs/askr/jsx-runtime";
3
3
 
4
4
  const renderIntrinsicElement = jsx as (type: string, props: Record<string, unknown>) => JSX.Element;
5
5