@tenphi/starlight 0.10.2 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1 @@
1
+ export {}
@@ -0,0 +1,57 @@
1
+ //#region src/client/code-copy.ts
2
+ var CookbookCodeBlock = class extends HTMLElement {
3
+ #resetTimer;
4
+ connectedCallback() {
5
+ this.addEventListener("click", this.#copy);
6
+ }
7
+ disconnectedCallback() {
8
+ this.removeEventListener("click", this.#copy);
9
+ if (this.#resetTimer !== void 0) window.clearTimeout(this.#resetTimer);
10
+ }
11
+ #copy = async (event) => {
12
+ const target = event.target;
13
+ const button = target instanceof Element ? target.closest("[data-copy-code]") : void 0;
14
+ const code = this.querySelector("pre code");
15
+ if (!button || !this.contains(button) || !code) return;
16
+ try {
17
+ await writeClipboard(code);
18
+ } catch {
19
+ button.dataset.copyState = "error";
20
+ button.setAttribute("aria-label", "Could not copy code");
21
+ button.title = "Could not copy code";
22
+ return;
23
+ }
24
+ button.dataset.copyState = "copied";
25
+ button.setAttribute("aria-label", "Code copied");
26
+ button.title = "Code copied";
27
+ if (this.#resetTimer !== void 0) window.clearTimeout(this.#resetTimer);
28
+ this.#resetTimer = window.setTimeout(() => {
29
+ delete button.dataset.copyState;
30
+ button.setAttribute("aria-label", "Copy code");
31
+ button.title = "Copy code";
32
+ this.#resetTimer = void 0;
33
+ }, 2e3);
34
+ };
35
+ };
36
+ async function writeClipboard(code) {
37
+ const value = code.textContent ?? "";
38
+ if (navigator.clipboard?.writeText) {
39
+ await navigator.clipboard.writeText(value);
40
+ return;
41
+ }
42
+ const selection = window.getSelection();
43
+ const previousRanges = selection ? Array.from({ length: selection.rangeCount }, (_, index) => selection.getRangeAt(index)) : [];
44
+ const range = document.createRange();
45
+ range.selectNodeContents(code);
46
+ selection?.removeAllRanges();
47
+ selection?.addRange(range);
48
+ const copied = document.execCommand("copy");
49
+ selection?.removeAllRanges();
50
+ for (const previousRange of previousRanges) selection?.addRange(previousRange);
51
+ if (!copied) throw new Error("Clipboard unavailable");
52
+ }
53
+ if (!customElements.get("cookbook-code-block")) customElements.define("cookbook-code-block", CookbookCodeBlock);
54
+ //#endregion
55
+ export {};
56
+
57
+ //# sourceMappingURL=code-copy.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"code-copy.js","names":[],"sources":["../../src/client/code-copy.ts"],"sourcesContent":["export {};\n\nclass CookbookCodeBlock extends HTMLElement {\n #resetTimer: number | undefined;\n\n connectedCallback() {\n this.addEventListener(\"click\", this.#copy);\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this.#copy);\n if (this.#resetTimer !== undefined) {\n window.clearTimeout(this.#resetTimer);\n }\n }\n\n #copy = async (event: MouseEvent) => {\n const target = event.target;\n const button =\n target instanceof Element\n ? target.closest<HTMLButtonElement>(\"[data-copy-code]\")\n : undefined;\n const code = this.querySelector<HTMLElement>(\"pre code\");\n if (!button || !this.contains(button) || !code) return;\n\n try {\n await writeClipboard(code);\n } catch {\n button.dataset.copyState = \"error\";\n button.setAttribute(\"aria-label\", \"Could not copy code\");\n button.title = \"Could not copy code\";\n return;\n }\n\n button.dataset.copyState = \"copied\";\n button.setAttribute(\"aria-label\", \"Code copied\");\n button.title = \"Code copied\";\n\n if (this.#resetTimer !== undefined) {\n window.clearTimeout(this.#resetTimer);\n }\n this.#resetTimer = window.setTimeout(() => {\n delete button.dataset.copyState;\n button.setAttribute(\"aria-label\", \"Copy code\");\n button.title = \"Copy code\";\n this.#resetTimer = undefined;\n }, 2_000);\n };\n}\n\nasync function writeClipboard(code: HTMLElement): Promise<void> {\n const value = code.textContent ?? \"\";\n if (navigator.clipboard?.writeText) {\n await navigator.clipboard.writeText(value);\n return;\n }\n\n const selection = window.getSelection();\n const previousRanges = selection\n ? Array.from({ length: selection.rangeCount }, (_, index) =>\n selection.getRangeAt(index),\n )\n : [];\n const range = document.createRange();\n range.selectNodeContents(code);\n selection?.removeAllRanges();\n selection?.addRange(range);\n const copied = document.execCommand(\"copy\");\n selection?.removeAllRanges();\n for (const previousRange of previousRanges)\n selection?.addRange(previousRange);\n if (!copied) throw new Error(\"Clipboard unavailable\");\n}\n\nif (!customElements.get(\"cookbook-code-block\")) {\n customElements.define(\"cookbook-code-block\", CookbookCodeBlock);\n}\n"],"mappings":";AAEA,IAAM,oBAAN,cAAgC,YAAY;CAC1C;CAEA,oBAAoB;EAClB,KAAK,iBAAiB,SAAS,KAAK,KAAK;CAC3C;CAEA,uBAAuB;EACrB,KAAK,oBAAoB,SAAS,KAAK,KAAK;EAC5C,IAAI,KAAK,gBAAgB,KAAA,GACvB,OAAO,aAAa,KAAK,WAAW;CAExC;CAEA,QAAQ,OAAO,UAAsB;EACnC,MAAM,SAAS,MAAM;EACrB,MAAM,SACJ,kBAAkB,UACd,OAAO,QAA2B,kBAAkB,IACpD,KAAA;EACN,MAAM,OAAO,KAAK,cAA2B,UAAU;EACvD,IAAI,CAAC,UAAU,CAAC,KAAK,SAAS,MAAM,KAAK,CAAC,MAAM;EAEhD,IAAI;GACF,MAAM,eAAe,IAAI;EAC3B,QAAQ;GACN,OAAO,QAAQ,YAAY;GAC3B,OAAO,aAAa,cAAc,qBAAqB;GACvD,OAAO,QAAQ;GACf;EACF;EAEA,OAAO,QAAQ,YAAY;EAC3B,OAAO,aAAa,cAAc,aAAa;EAC/C,OAAO,QAAQ;EAEf,IAAI,KAAK,gBAAgB,KAAA,GACvB,OAAO,aAAa,KAAK,WAAW;EAEtC,KAAK,cAAc,OAAO,iBAAiB;GACzC,OAAO,OAAO,QAAQ;GACtB,OAAO,aAAa,cAAc,WAAW;GAC7C,OAAO,QAAQ;GACf,KAAK,cAAc,KAAA;EACrB,GAAG,GAAK;CACV;AACF;AAEA,eAAe,eAAe,MAAkC;CAC9D,MAAM,QAAQ,KAAK,eAAe;CAClC,IAAI,UAAU,WAAW,WAAW;EAClC,MAAM,UAAU,UAAU,UAAU,KAAK;EACzC;CACF;CAEA,MAAM,YAAY,OAAO,aAAa;CACtC,MAAM,iBAAiB,YACnB,MAAM,KAAK,EAAE,QAAQ,UAAU,WAAW,IAAI,GAAG,UAC/C,UAAU,WAAW,KAAK,CAC5B,IACA,CAAC;CACL,MAAM,QAAQ,SAAS,YAAY;CACnC,MAAM,mBAAmB,IAAI;CAC7B,WAAW,gBAAgB;CAC3B,WAAW,SAAS,KAAK;CACzB,MAAM,SAAS,SAAS,YAAY,MAAM;CAC1C,WAAW,gBAAgB;CAC3B,KAAK,MAAM,iBAAiB,gBAC1B,WAAW,SAAS,aAAa;CACnC,IAAI,CAAC,QAAQ,MAAM,IAAI,MAAM,uBAAuB;AACtD;AAEA,IAAI,CAAC,eAAe,IAAI,qBAAqB,GAC3C,eAAe,OAAO,uBAAuB,iBAAiB"}
@@ -3,8 +3,10 @@ import jetBrainsMonoLatin from "@fontsource-variable/jetbrains-mono/files/jetbra
3
3
  import onestLatin from "@fontsource-variable/onest/files/onest-latin-wght-normal.woff2?url";
4
4
  import arrowLeftIcon from "../icons/arrow-left.svg?raw";
5
5
  import arrowRightIcon from "../icons/arrow-right.svg?raw";
6
+ import checkIcon from "../icons/check.svg?raw";
6
7
  import chevronRightIcon from "../icons/chevron-right.svg?raw";
7
8
  import closeIcon from "../icons/close.svg?raw";
9
+ import copyIcon from "../icons/copy.svg?raw";
8
10
  import searchIcon from "../icons/search.svg?raw";
9
11
  import { resolveComponentStyles } from "./component-styles.js";
10
12
  import { svgIconUrl } from "./svg-icon.js";
@@ -530,6 +532,116 @@ export default function GlobalStyles() {
530
532
  preset: "h1",
531
533
  });
532
534
 
535
+ useGlobalStyles(
536
+ ".hero",
537
+ resolveComponentStyles("Hero", {
538
+ display: "grid",
539
+ gridTemplateColumns: {
540
+ "": "minmax(0, 7fr) minmax(12rem, 4fr)",
541
+ "@mobile": "minmax(0, 1fr)",
542
+ },
543
+ alignItems: "center",
544
+ gap: "clamp(2rem, 5vw, 5rem)",
545
+ paddingBlockStart: {
546
+ "": "clamp(3rem, 8vw, 7rem)",
547
+ "@mobile": "($gap * 4)",
548
+ },
549
+ paddingBlockEnd: "clamp(2rem, 6vw, 5rem)",
550
+ Visual: {
551
+ $: "> img, > .hero-html",
552
+ order: { "": "2", "@mobile": "0" },
553
+ display: "grid",
554
+ placeItems: "center",
555
+ inlineSize: "min(100%, 22rem)",
556
+ marginInlineStart: "auto",
557
+ marginInlineEnd: "auto",
558
+ color: "#accent-surface",
559
+ },
560
+ Stack: {
561
+ $: "> .stack",
562
+ display: "flex",
563
+ flow: "column",
564
+ alignItems: { "": "flex-start", "@mobile": "center" },
565
+ gap: "clamp(1.5rem, 3vw, 2rem)",
566
+ textAlign: { "": "start", "@mobile": "center" },
567
+ },
568
+ Copy: {
569
+ $: "> .stack > .copy",
570
+ display: "flex",
571
+ flow: "column",
572
+ alignItems: "inherit",
573
+ gap: "($gap * 2)",
574
+ },
575
+ Title: {
576
+ $: "h1",
577
+ maxInlineSize: "16ch",
578
+ margin: "0",
579
+ color: "#text",
580
+ preset: "h1",
581
+ fontSize: "clamp(2.75rem, 7vw, 4.75rem)",
582
+ textWrap: "balance",
583
+ },
584
+ Tagline: {
585
+ $: ".tagline",
586
+ maxInlineSize: "48ch",
587
+ color: "#text-soft",
588
+ fontSize: "clamp(1.05rem, 2.5vw, 1.35rem)",
589
+ lineHeight: "1.55",
590
+ textWrap: "balance",
591
+ },
592
+ Actions: {
593
+ $: ".actions",
594
+ display: "flex",
595
+ flow: "row wrap",
596
+ justifyContent: { "": "flex-start", "@mobile": "center" },
597
+ gap: "($gap * 1.5)",
598
+ },
599
+ Action: {
600
+ $: ".sl-link-button",
601
+ display: "inline-flex",
602
+ alignItems: "center",
603
+ minBlockSize: "$control-height",
604
+ padding: "($gap * 1.25) ($gap * 2.5)",
605
+ gap: "$gap",
606
+ color: "#text",
607
+ border: true,
608
+ radius: "999px",
609
+ fill: "#surface-2",
610
+ preset: "navigation / strong",
611
+ textDecoration: "none",
612
+ transition: "fill 120ms ease, translate 120ms ease",
613
+ },
614
+ HoverAction: {
615
+ $: ".sl-link-button:hover",
616
+ fill: "#surface-2-hover",
617
+ translate: "0 -1px",
618
+ },
619
+ PrimaryAction: {
620
+ $: ".sl-link-button.primary",
621
+ color: "#accent-surface-text",
622
+ borderColor: "#accent-surface",
623
+ fill: "#accent-surface",
624
+ },
625
+ SecondaryAction: {
626
+ $: ".sl-link-button.secondary",
627
+ color: "#accent-text",
628
+ borderColor: "#border-strong",
629
+ },
630
+ MinimalAction: {
631
+ $: ".sl-link-button.minimal",
632
+ paddingInlineStart: "0",
633
+ paddingInlineEnd: "0",
634
+ color: "#accent-text",
635
+ border: "0",
636
+ fill: "#clear",
637
+ },
638
+ ActionIcon: {
639
+ $: ".sl-link-button svg",
640
+ flexShrink: "0",
641
+ },
642
+ }),
643
+ );
644
+
533
645
  useGlobalStyles("main > .content-panel:first-of-type", {
534
646
  paddingBlockStart: "($gap * 3)",
535
647
  paddingBlockEnd: "($gap * 2)",
@@ -611,15 +723,82 @@ export default function GlobalStyles() {
611
723
  },
612
724
  );
613
725
 
614
- useGlobalStyles(".sl-markdown-content pre:not(:where(.not-content *))", {
615
- padding: "0.875rem 1rem",
616
- overflowX: "auto",
617
- color: "#syntax-text",
618
- border: true,
619
- fill: "#syntax-bg",
620
- radius: "$card-radius",
621
- tabSize: "2",
622
- });
726
+ useGlobalStyles(
727
+ ".sl-markdown-content .td-code-block",
728
+ resolveComponentStyles("MarkdownCodeBlock", {
729
+ display: "block",
730
+ position: "relative",
731
+ minInlineSize: "0",
732
+ Pre: {
733
+ $: "> pre",
734
+ margin: "0",
735
+ padding: "0.875rem 3.75rem 0.875rem 1rem",
736
+ overflowX: "auto",
737
+ color: "#syntax-text",
738
+ border: true,
739
+ fill: "#syntax-bg",
740
+ radius: "$card-radius",
741
+ tabSize: "2",
742
+ },
743
+ CopyButton: {
744
+ $: "> [data-copy-code]",
745
+ position: "absolute",
746
+ zIndex: "1",
747
+ insetBlockStart: "$gap",
748
+ insetInlineEnd: "$gap",
749
+ margin: "0",
750
+ display: "grid",
751
+ placeItems: "center",
752
+ inlineSize: "2rem",
753
+ minInlineSize: "2rem",
754
+ blockSize: "2rem",
755
+ minBlockSize: "2rem",
756
+ padding: "0",
757
+ color: "#text-soft",
758
+ border: true,
759
+ fill: "#surface-2",
760
+ radius: "$radius",
761
+ preset: "small / strong",
762
+ cursor: "pointer",
763
+ transition: "color 120ms ease, fill 120ms ease",
764
+ },
765
+ HoverCopyButton: {
766
+ $: "> [data-copy-code]:hover",
767
+ color: "#text",
768
+ fill: "#surface-2-hover",
769
+ },
770
+ CopiedButton: {
771
+ $: '> [data-copy-code][data-copy-state="copied"]',
772
+ color: "#green-text",
773
+ borderColor: "#green",
774
+ },
775
+ CopyIcon: {
776
+ $: "> [data-copy-code] > [data-copy-icon]",
777
+ display: "block",
778
+ inlineSize: "1rem",
779
+ blockSize: "1rem",
780
+ fill: "#current",
781
+ mask: `url("${svgIconUrl(copyIcon)}") center / contain no-repeat`,
782
+ },
783
+ CopiedIcon: {
784
+ $: '> [data-copy-code][data-copy-state="copied"] > [data-copy-icon]',
785
+ mask: `url("${svgIconUrl(checkIcon)}") center / contain no-repeat`,
786
+ },
787
+ }),
788
+ );
789
+
790
+ useGlobalStyles(
791
+ '.sl-markdown-content pre[data-language="mermaid"]:not(:where(.not-content *))',
792
+ {
793
+ padding: "0.875rem 1rem",
794
+ overflowX: "auto",
795
+ color: "#syntax-text",
796
+ border: true,
797
+ fill: "#syntax-bg",
798
+ radius: "$card-radius",
799
+ tabSize: "2",
800
+ },
801
+ );
623
802
 
624
803
  useGlobalStyles(".sl-markdown-content pre code", {
625
804
  padding: "0",
@@ -767,57 +946,34 @@ export default function GlobalStyles() {
767
946
  },
768
947
  );
769
948
 
770
- useGlobalStyles(".sl-markdown-content .sl-heading-wrapper", {
771
- preset: "heading",
772
- });
773
-
774
- useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h1", {
775
- preset: "h1",
776
- });
777
-
778
- useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h2", {
779
- preset: "h2",
780
- });
781
-
782
- useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h3", {
783
- preset: "h3",
784
- });
785
-
786
- useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h4", {
787
- preset: "h4",
788
- });
789
-
790
- useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h5", {
791
- preset: "h5",
792
- });
793
-
794
- useGlobalStyles(".sl-markdown-content .sl-heading-wrapper.level-h6", {
795
- preset: "h6",
796
- });
797
-
798
- useGlobalStyles(".sl-markdown-content .sl-heading-wrapper > :first-child", {
799
- display: "inline",
800
- paddingInlineEnd: "1.1em",
801
- });
802
-
803
- useGlobalStyles(".sl-markdown-content .sl-anchor-link", {
804
- position: "relative",
805
- display: "inline-flex",
806
- marginInlineStart: "-0.85em",
807
- color: "#text-muted",
808
- userSelect: "none",
809
- textDecoration: "none",
810
- });
811
-
812
- useGlobalStyles(".sl-markdown-content .sl-anchor-link:hover", {
813
- color: "#accent-text",
814
- });
815
-
816
- useGlobalStyles(".sl-markdown-content .sl-anchor-icon > svg", {
817
- display: "inline",
818
- inlineSize: "0.8275em",
819
- verticalAlign: "middle",
820
- });
949
+ useGlobalStyles(
950
+ ".sl-markdown-content .sl-heading-wrapper",
951
+ resolveComponentStyles("MarkdownHeading", {
952
+ preset: "heading",
953
+ Heading: {
954
+ $: "> :first-child",
955
+ display: "inline",
956
+ paddingInlineEnd: "0.35em",
957
+ },
958
+ Heading1: { $: "&.level-h1", preset: "h1" },
959
+ Heading2: { $: "&.level-h2", preset: "h2" },
960
+ Heading3: { $: "&.level-h3", preset: "h3" },
961
+ Heading4: { $: "&.level-h4", preset: "h4" },
962
+ Heading5: { $: "&.level-h5", preset: "h5" },
963
+ Heading6: { $: "&.level-h6", preset: "h6" },
964
+ Link: {
965
+ $: "> .sl-anchor-link",
966
+ display: "inline-flex",
967
+ color: "#text-muted",
968
+ userSelect: "none",
969
+ textDecoration: "none",
970
+ },
971
+ HoverLink: {
972
+ $: "> .sl-anchor-link:hover",
973
+ color: "#accent-text",
974
+ },
975
+ }),
976
+ );
821
977
 
822
978
  useGlobalStyles(".starlight-aside", {
823
979
  padding: "($gap * 2) ($gap * 2.5)",
@@ -1043,29 +1199,52 @@ export default function GlobalStyles() {
1043
1199
  preset: "h5 / strong",
1044
1200
  });
1045
1201
 
1046
- useGlobalStyles("starlight-lang-select label", {
1047
- position: "relative",
1048
- display: "flex",
1049
- alignItems: "center",
1050
- gap: "($gap * 0.5)",
1051
- color: "#text-soft",
1052
- });
1053
-
1054
- useGlobalStyles("starlight-lang-select label:hover", {
1055
- color: "#text",
1056
- });
1057
-
1058
- useGlobalStyles("starlight-lang-select select", {
1059
- color: "#text-soft",
1060
- border: "0",
1061
- fill: "#clear",
1062
- cursor: "pointer",
1063
- });
1064
-
1065
- useGlobalStyles("starlight-lang-select option", {
1066
- color: "#text",
1067
- fill: "#surface-2",
1068
- });
1202
+ useGlobalStyles(
1203
+ "starlight-lang-select",
1204
+ resolveComponentStyles("LanguageSelect", {
1205
+ display: "block",
1206
+ Label: {
1207
+ $: "label",
1208
+ position: "relative",
1209
+ display: "flex",
1210
+ alignItems: "center",
1211
+ color: "#text-soft",
1212
+ },
1213
+ HoverLabel: { $: "label:hover", color: "#text" },
1214
+ LabelIcon: {
1215
+ $: ".label-icon",
1216
+ position: "absolute",
1217
+ zIndex: "1",
1218
+ insetInlineStart: "$gap",
1219
+ pointerEvents: "none",
1220
+ },
1221
+ Select: {
1222
+ $: "select",
1223
+ appearance: "none",
1224
+ inlineSize: "8rem",
1225
+ minBlockSize: "$control-height",
1226
+ paddingInlineStart: "($gap * 3.5)",
1227
+ paddingInlineEnd: "($gap * 3.5)",
1228
+ color: "#text-soft",
1229
+ border: "0",
1230
+ fill: "#clear",
1231
+ preset: "small",
1232
+ cursor: "pointer",
1233
+ textOverflow: "ellipsis",
1234
+ },
1235
+ Caret: {
1236
+ $: ".caret",
1237
+ position: "absolute",
1238
+ insetInlineEnd: "$gap",
1239
+ pointerEvents: "none",
1240
+ },
1241
+ Option: {
1242
+ $: "option",
1243
+ color: "#text",
1244
+ fill: "#surface-2",
1245
+ },
1246
+ }),
1247
+ );
1069
1248
 
1070
1249
  useGlobalStyles(".td-header__social a, .td-mobile-preferences__social a", {
1071
1250
  color: "#accent-text",
@@ -1592,6 +1771,9 @@ export default function GlobalStyles() {
1592
1771
  "$docs-nav-pad-x": {
1593
1772
  "@mobile": "1rem",
1594
1773
  },
1774
+ "$docs-content-pad-x": {
1775
+ "@mobile": "1rem",
1776
+ },
1595
1777
  "$docs-nav-gap": {
1596
1778
  "@mobile": "0.5rem",
1597
1779
  },
@@ -36,6 +36,7 @@ export const PackageVersionRoot = customizeComponent(
36
36
  as: "span",
37
37
  styles: {
38
38
  display: "inline-flex",
39
+ hide: { "": false, "@compact": true },
39
40
  alignItems: "center",
40
41
  flexShrink: "0",
41
42
  minBlockSize: "1.5rem",
@@ -162,10 +163,13 @@ export const StarlightHeaderRoot = customizeComponent(
162
163
  },
163
164
  SiteTitle: {
164
165
  $: ".site-title",
166
+ minInlineSize: "0",
167
+ overflow: "hidden",
165
168
  color: "#text",
166
169
  preset: { "": "h4 / strong", "@mobile": "h5 / strong" },
167
170
  textDecoration: "none",
168
171
  whiteSpace: "nowrap",
172
+ textOverflow: "ellipsis",
169
173
  },
170
174
  Search: {
171
175
  $: ".td-header__search",
@@ -231,7 +235,7 @@ export const StarlightHeaderRoot = customizeComponent(
231
235
  }),
232
236
  );
233
237
 
234
- const appearanceSelectStyles = {
238
+ export const appearanceSelectStyles = {
235
239
  display: "grid",
236
240
  flexShrink: "0",
237
241
  placeItems: "center",
@@ -276,7 +280,7 @@ const appearanceSelectStyles = {
276
280
  },
277
281
  Select: {
278
282
  $: "select",
279
- appearance: { "": "base-select", "@mobile": "none" },
283
+ appearance: "base-select",
280
284
  position: "static",
281
285
  inlineSize: "100%",
282
286
  minInlineSize: "0",
@@ -0,0 +1,8 @@
1
+ import { describe, expect, it } from "vitest";
2
+ import { appearanceSelectStyles } from "./LayoutComponents.js";
3
+
4
+ describe("layout components", () => {
5
+ it("keeps appearance pickers styled at compact viewports", () => {
6
+ expect(appearanceSelectStyles.Select.appearance).toBe("base-select");
7
+ });
8
+ });
@@ -4,6 +4,7 @@ export const cookbookStates = {
4
4
  "@mobile": "@media(w < 50rem)",
5
5
  "@desktop": "@media(w >= 50rem)",
6
6
  "@small": "@media(w <= 40rem)",
7
+ "@compact": "@media(w <= 23rem)",
7
8
  "@shell-mobile": "@media(w <= 48rem)",
8
9
  "@shell-desktop": "@media(w > 48rem)",
9
10
  "@narrow-layout": "@media(w < 72rem)",
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10"/></svg>
@@ -0,0 +1,11 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
2
+ <rect width="64" height="64" rx="14" fill="#315efb" />
3
+ <path
4
+ fill="#fff"
5
+ d="M14.8 16c6.7.2 12.3 2 16.7 5.4v28.4c-4.4-3.1-10-4.7-16.6-4.9a3 3 0 0 1-2.9-3V19a3 3 0 0 1 2.8-3Z"
6
+ />
7
+ <path
8
+ fill="#fff"
9
+ d="M49.2 16c-6.7.2-12.3 2-16.7 5.4v28.4c4.4-3.1 10-4.7 16.6-4.9a3 3 0 0 0 2.9-3V19a3 3 0 0 0-2.8-3Z"
10
+ />
11
+ </svg>
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","names":[],"sources":["../src/starlight-runtime.d.ts","../src/integration.ts","../src/theme/index.ts","../src/theme/defaults.ts"],"mappings":";;;;UAEiB;EACf;EACA;EACA;EACA;EACA,mBAAmB;EACnB;GACC;;iBAGqB,UAAU,SAAS,mBAAmB;;;UCiD7C;EACf,SAAS;EACT;;iBAGsB,SACtB,UAAS,kBACR;iBAsiBa,eACd,QAAQ,kBAAkB,gBACzB;;;UCzlBc;EACf;IACE,SAAS;IACT,UAAU;IACV,UAAU;IACV,MAAM;IACN,UAAU;IACV,YAAY;IACZ,eAAe;IACf,mBAAmB;IACnB,OAAO;IACP,QAAQ;;;EAGV,aAAa,eAAe;EAC5B,QAAQ;EACR,SAAS,eAAe;EACxB;IACE;IACA;IACA;IACA;;EAEF,aAAa;;iBAGC,iBAAiB,QAAO,cAAmB;;;cCvC9C;;;;;;;;;;;;cAkBA,4BAA4B,eAAe"}
1
+ {"version":3,"file":"index.d.ts","names":[],"sources":["../src/starlight-runtime.d.ts","../src/integration.ts","../src/theme/index.ts","../src/theme/defaults.ts"],"mappings":";;;;UAEiB;EACf;EACA;EACA;EACA;EACA,mBAAmB;EACnB;GACC;;iBAGqB,UAAU,SAAS,mBAAmB;;;UCsD7C;EACf,SAAS;EACT;;iBAGsB,SACtB,UAAS,kBACR;iBAinBa,eACd,QAAQ,kBAAkB,gBACzB;;;UCzqBc;EACf;IACE,SAAS;IACT,UAAU;IACV,UAAU;IACV,MAAM;IACN,UAAU;IACV,YAAY;IACZ,eAAe;IACf,mBAAmB;IACnB,OAAO;IACP,QAAQ;;;EAGV,aAAa,eAAe;EAC5B,QAAQ;EACR,SAAS,eAAe;EACxB;IACE;IACA;IACA;IACA;;EAEF,aAAa;;iBAGC,iBAAiB,QAAO,cAAmB;;;cCvC9C;;;;;;;;;;;;cAkBA,4BAA4B,eAAe"}