@sky.ui/core 0.0.40 → 0.0.42
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/dist/custom-elements.json +2011 -1275
- package/dist/helper/controllers/animation-controller.d.ts +4 -4
- package/dist/helper/controllers/animation-controller.js.map +1 -1
- package/dist/helper/controllers/index.d.ts +1 -0
- package/dist/helper/controllers/index.js +1 -1
- package/dist/helper/controllers/popover-controller.d.ts +12 -12
- package/dist/helper/controllers/popover-controller.js.map +1 -1
- package/dist/helper/controllers/preset-controller.d.ts +55 -0
- package/dist/helper/controllers/preset-controller.js +2 -0
- package/dist/helper/controllers/preset-controller.js.map +1 -0
- package/dist/helper/iconify-offline.js.map +1 -1
- package/dist/helper/index.js +1 -1
- package/dist/helper/internals/form-control-base.d.ts +6 -6
- package/dist/helper/internals/form-control-base.js.map +1 -1
- package/dist/helper/styles/focus-ring.d.ts +10 -0
- package/dist/helper/styles/focus-ring.js +10 -0
- package/dist/helper/styles/focus-ring.js.map +1 -0
- package/dist/helper/utils/color-resolver.d.ts +0 -14
- package/dist/helper/utils/color-resolver.js +1 -1
- package/dist/helper/utils/color-resolver.js.map +1 -1
- package/dist/helper/utils/component-presets.d.ts +132 -0
- package/dist/helper/utils/component-presets.js +2 -0
- package/dist/helper/utils/component-presets.js.map +1 -0
- package/dist/helper/utils/contrast-color.d.ts +6 -6
- package/dist/helper/utils/contrast-color.js.map +1 -1
- package/dist/helper/utils/index.d.ts +1 -0
- package/dist/helper/utils/index.js +1 -1
- package/dist/helper/utils/size-resolver.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/sky-alert/sky-alert.d.ts +15 -7
- package/dist/sky-alert/sky-alert.js +10 -20
- package/dist/sky-alert/sky-alert.js.map +1 -1
- package/dist/sky-appbar/sky-appbar.d.ts +9 -3
- package/dist/sky-appbar/sky-appbar.js +27 -19
- package/dist/sky-appbar/sky-appbar.js.map +1 -1
- package/dist/sky-avatar/sky-avatar.d.ts +6 -2
- package/dist/sky-avatar/sky-avatar.js +17 -14
- package/dist/sky-avatar/sky-avatar.js.map +1 -1
- package/dist/sky-badge/sky-badge.d.ts +9 -5
- package/dist/sky-badge/sky-badge.js +12 -16
- package/dist/sky-badge/sky-badge.js.map +1 -1
- package/dist/sky-button/sky-button.d.ts +27 -7
- package/dist/sky-button/sky-button.js +24 -32
- package/dist/sky-button/sky-button.js.map +1 -1
- package/dist/sky-card/sky-card.d.ts +13 -5
- package/dist/sky-card/sky-card.js +24 -24
- package/dist/sky-card/sky-card.js.map +1 -1
- package/dist/sky-checkbox/sky-checkbox.d.ts +6 -3
- package/dist/sky-checkbox/sky-checkbox.js +43 -44
- package/dist/sky-checkbox/sky-checkbox.js.map +1 -1
- package/dist/sky-chip/sky-chip.d.ts +7 -3
- package/dist/sky-chip/sky-chip.js +35 -43
- package/dist/sky-chip/sky-chip.js.map +1 -1
- package/dist/sky-col/sky-col.d.ts +7 -3
- package/dist/sky-col/sky-col.js +6 -11
- package/dist/sky-col/sky-col.js.map +1 -1
- package/dist/sky-combobox/sky-combobox.d.ts +15 -8
- package/dist/sky-combobox/sky-combobox.js +193 -257
- package/dist/sky-combobox/sky-combobox.js.map +1 -1
- package/dist/sky-dialog/sky-dialog.d.ts +7 -3
- package/dist/sky-dialog/sky-dialog.js +22 -20
- package/dist/sky-dialog/sky-dialog.js.map +1 -1
- package/dist/sky-divider/sky-divider.d.ts +6 -2
- package/dist/sky-divider/sky-divider.js +5 -5
- package/dist/sky-divider/sky-divider.js.map +1 -1
- package/dist/sky-flexbox/sky-flexbox.d.ts +10 -6
- package/dist/sky-flexbox/sky-flexbox.js +6 -6
- package/dist/sky-flexbox/sky-flexbox.js.map +1 -1
- package/dist/sky-flexcol/sky-flexcol.d.ts +6 -2
- package/dist/sky-flexcol/sky-flexcol.js +2 -2
- package/dist/sky-flexcol/sky-flexcol.js.map +1 -1
- package/dist/sky-form/sky-form.d.ts +15 -11
- package/dist/sky-form/sky-form.js +14 -14
- package/dist/sky-form/sky-form.js.map +1 -1
- package/dist/sky-grid/sky-grid.d.ts +5 -1
- package/dist/sky-grid/sky-grid.js +3 -3
- package/dist/sky-grid/sky-grid.js.map +1 -1
- package/dist/sky-icon/sky-icon.d.ts +3 -0
- package/dist/sky-icon/sky-icon.js +4 -4
- package/dist/sky-icon/sky-icon.js.map +1 -1
- package/dist/sky-image/sky-image.d.ts +8 -4
- package/dist/sky-image/sky-image.js +5 -5
- package/dist/sky-image/sky-image.js.map +1 -1
- package/dist/sky-image/srcset-utils.js.map +1 -1
- package/dist/sky-input/sky-input.d.ts +9 -5
- package/dist/sky-input/sky-input.js +155 -170
- package/dist/sky-input/sky-input.js.map +1 -1
- package/dist/sky-list/sky-list.d.ts +7 -3
- package/dist/sky-list/sky-list.js +6 -4
- package/dist/sky-list/sky-list.js.map +1 -1
- package/dist/sky-listitem/sky-listitem.d.ts +5 -1
- package/dist/sky-listitem/sky-listitem.js +10 -7
- package/dist/sky-listitem/sky-listitem.js.map +1 -1
- package/dist/sky-radio/sky-radio.d.ts +9 -4
- package/dist/sky-radio/sky-radio.js +7 -9
- package/dist/sky-radio/sky-radio.js.map +1 -1
- package/dist/sky-row/sky-row.d.ts +4 -1
- package/dist/sky-row/sky-row.js +2 -2
- package/dist/sky-row/sky-row.js.map +1 -1
- package/dist/sky-sheet/sky-sheet.d.ts +11 -6
- package/dist/sky-sheet/sky-sheet.js +23 -23
- package/dist/sky-sheet/sky-sheet.js.map +1 -1
- package/dist/sky-simple-table/sky-simple-table.d.ts +7 -3
- package/dist/sky-simple-table/sky-simple-table.js +4 -7
- package/dist/sky-simple-table/sky-simple-table.js.map +1 -1
- package/dist/sky-theme-provider/sky-theme-provider.d.ts +26 -26
- package/dist/sky-theme-provider/sky-theme-provider.js +2 -2
- package/dist/sky-theme-provider/sky-theme-provider.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{css as r,LitElement as s,html as
|
|
1
|
+
import{css as r,LitElement as s,html as e}from"lit";import{property as t,customElement as a}from"lit/decorators.js";import{resolveRadius as o}from"../helper/utils/size-resolver.js";import{PresetController as i}from"../helper/controllers/preset-controller.js";var n=Object.defineProperty,d=Object.getOwnPropertyDescriptor,y=(r,s,e,t)=>{for(var a,o=t>1?void 0:t?d(s,e):s,i=r.length-1;i>=0;i--)(a=r[i])&&(o=(t?a(s,e,o):a(o))||o);return t&&o&&n(s,e,o),o};const b={none:"0",sm:"var(--sky-radius-primary)",md:"var(--sky-radius-secondary)",lg:"var(--sky-radius-tertiary)",xl:"var(--sky-radius-full)"};function l(r){return Object.prototype.hasOwnProperty.call(b,r)?b[r]:o(r)}let p=class extends s{constructor(){super(...arguments),this.bg="primary",this.blurLevel="sm",this.shadow="sm",this.border="sm",this.radius="md",this.preset="",this._presets=new i(this)}connectedCallback(){super.connectedCallback(),this._applyRadiusVar()}_applyRadiusVar(){this.style.setProperty("--sheet-radius",l(this.radius))}update(r){(0===r.size||r.has("radius")||r.has("preset"))&&this._applyRadiusVar(),super.update(r)}render(){return e`<slot></slot>`}};p.styles=r`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -10,49 +10,49 @@ import{css as r,LitElement as s,html as a}from"lit";import{property as e,customE
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
/* background */
|
|
13
|
-
:host([bg=
|
|
13
|
+
:host([bg="primary"]) {
|
|
14
14
|
background: var(--sky-glass-primary);
|
|
15
15
|
}
|
|
16
|
-
:host([bg=
|
|
16
|
+
:host([bg="secondary"]) {
|
|
17
17
|
background: var(--sky-glass-secondary);
|
|
18
18
|
}
|
|
19
|
-
:host([bg=
|
|
19
|
+
:host([bg="tertiary"]) {
|
|
20
20
|
background: var(--sky-glass-tertiary);
|
|
21
21
|
}
|
|
22
|
-
:host([bg=
|
|
22
|
+
:host([bg="solid"]) {
|
|
23
23
|
background: var(--sky-glass-solid);
|
|
24
24
|
background-image: none;
|
|
25
25
|
backdrop-filter: none;
|
|
26
26
|
-webkit-backdrop-filter: none;
|
|
27
27
|
}
|
|
28
|
-
:host([bg=
|
|
28
|
+
:host([bg="transparent"]) {
|
|
29
29
|
background: transparent;
|
|
30
30
|
background-image: none;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
:host([bg=
|
|
34
|
-
:host([bg=
|
|
35
|
-
:host([bg=
|
|
33
|
+
:host([bg="primary"]:not([blurLevel="none"])),
|
|
34
|
+
:host([bg="secondary"]:not([blurLevel="none"])),
|
|
35
|
+
:host([bg="tertiary"]:not([blurLevel="none"])) {
|
|
36
36
|
background-image: var(--sky-glass-surface);
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
:host([blurLevel=
|
|
39
|
+
:host([blurLevel="none"]) {
|
|
40
40
|
backdrop-filter: none;
|
|
41
41
|
-webkit-backdrop-filter: none;
|
|
42
42
|
}
|
|
43
|
-
:host([blurLevel=
|
|
43
|
+
:host([blurLevel="sm"]) {
|
|
44
44
|
backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
|
|
45
45
|
var(--sky-saturation-primary);
|
|
46
46
|
-webkit-backdrop-filter: var(--sky-blur-primary)
|
|
47
47
|
var(--sky-brightness-primary) var(--sky-saturation-primary);
|
|
48
48
|
}
|
|
49
|
-
:host([blurLevel=
|
|
49
|
+
:host([blurLevel="md"]) {
|
|
50
50
|
backdrop-filter: var(--sky-blur-secondary) var(--sky-brightness-secondary)
|
|
51
51
|
var(--sky-saturation-secondary);
|
|
52
52
|
-webkit-backdrop-filter: var(--sky-blur-secondary)
|
|
53
53
|
var(--sky-brightness-secondary) var(--sky-saturation-secondary);
|
|
54
54
|
}
|
|
55
|
-
:host([blurLevel=
|
|
55
|
+
:host([blurLevel="lg"]) {
|
|
56
56
|
backdrop-filter: var(--sky-blur-tertiary) var(--sky-brightness-tertiary)
|
|
57
57
|
var(--sky-saturation-tertiary);
|
|
58
58
|
-webkit-backdrop-filter: var(--sky-blur-tertiary)
|
|
@@ -60,34 +60,34 @@ import{css as r,LitElement as s,html as a}from"lit";import{property as e,customE
|
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
/* shadow */
|
|
63
|
-
:host([shadow=
|
|
63
|
+
:host([shadow="none"]) {
|
|
64
64
|
box-shadow: none;
|
|
65
65
|
}
|
|
66
|
-
:host([shadow=
|
|
66
|
+
:host([shadow="sm"]) {
|
|
67
67
|
box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-primary);
|
|
68
68
|
}
|
|
69
|
-
:host([shadow=
|
|
69
|
+
:host([shadow="md"]) {
|
|
70
70
|
box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-secondary);
|
|
71
71
|
}
|
|
72
|
-
:host([shadow=
|
|
72
|
+
:host([shadow="lg"]) {
|
|
73
73
|
box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-tertiary);
|
|
74
74
|
}
|
|
75
|
-
:host([shadow=
|
|
75
|
+
:host([shadow="inset"]) {
|
|
76
76
|
box-shadow: var(--sky-box-shadow-inset);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
/* border */
|
|
80
|
-
:host([border=
|
|
80
|
+
:host([border="none"]) {
|
|
81
81
|
border: none;
|
|
82
82
|
}
|
|
83
|
-
:host([border=
|
|
83
|
+
:host([border="sm"]) {
|
|
84
84
|
border: var(--sky-border-primary);
|
|
85
85
|
}
|
|
86
|
-
:host([border=
|
|
86
|
+
:host([border="md"]) {
|
|
87
87
|
border: var(--sky-border-secondary);
|
|
88
88
|
}
|
|
89
|
-
:host([border=
|
|
89
|
+
:host([border="lg"]) {
|
|
90
90
|
border: var(--sky-border-tertiary);
|
|
91
91
|
}
|
|
92
|
-
`,
|
|
92
|
+
`,y([t({type:String,reflect:!0})],p.prototype,"bg",2),y([t({type:String,reflect:!0})],p.prototype,"blurLevel",2),y([t({type:String,reflect:!0})],p.prototype,"shadow",2),y([t({type:String,reflect:!0})],p.prototype,"border",2),y([t({type:String,reflect:!0})],p.prototype,"radius",2),y([t({type:String,reflect:!0})],p.prototype,"preset",2),p=y([a("sky-sheet")],p);export{p as SkySheet,l as resolveSheetRadius};
|
|
93
93
|
//# sourceMappingURL=sky-sheet.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sky-sheet.js","sources":["../../src/sky-sheet/sky-sheet.ts"],"sourcesContent":["import { LitElement, html, css, type PropertyValues } from
|
|
1
|
+
{"version":3,"file":"sky-sheet.js","sources":["../../src/sky-sheet/sky-sheet.ts"],"sourcesContent":["import { LitElement, html, css, type PropertyValues } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { resolveRadius } from \"../helper/utils/size-resolver.js\";\nimport { PresetController } from \"../helper/controllers/preset-controller\";\n\nexport type SkySheetBackground = \"primary\" | \"secondary\" | \"tertiary\" | \"solid\" | \"transparent\";\nexport type SkySheetBlurLevel = \"none\" | \"sm\" | \"md\" | \"lg\";\nexport type SkySheetShadow = \"none\" | \"sm\" | \"md\" | \"lg\" | \"inset\";\nexport type SkySheetBorder = \"none\" | \"sm\" | \"md\" | \"lg\";\n\n/** Preset tokens or any CSS length (e.g. `1rem`, `16px`). */\nexport type SkySheetRadius = string;\n\nconst SHEET_RADIUS_PRESETS: Record<string, string> = {\n none: \"0\",\n sm: \"var(--sky-radius-primary)\",\n md: \"var(--sky-radius-secondary)\",\n lg: \"var(--sky-radius-tertiary)\",\n xl: \"var(--sky-radius-full)\",\n};\n\n/** Preset map includes `xl`; arbitrary values pass through like `resolveRadius`. */\nexport function resolveSheetRadius(input: string): string {\n if (Object.prototype.hasOwnProperty.call(SHEET_RADIUS_PRESETS, input)) {\n return SHEET_RADIUS_PRESETS[input];\n }\n return resolveRadius(input);\n}\n\n/**\n * @element sky-sheet\n *\n * @summary Themed surface container with configurable background, blur, border, and shadow.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/sheet\n *\n * @slot - Content placed inside the sheet container.\n *\n * @property {SkySheetBackground} bg - Background style.\n * @property {SkySheetBlurLevel} blurLevel - Backdrop blur intensity.\n * @property {SkySheetShadow} shadow - Shadow style preset.\n * @property {SkySheetBorder} border - Border style preset.\n * @property {SkySheetRadius} radius - Preset (`none`, `sm`, `md`, `lg`, `xl`) or CSS length (`1rem`, `16px`).\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\n *\n * @Behavior\n * - Applies visual styles directly on `:host` for compact composition.\n * - Uses theme CSS variables for consistent glass and elevation tokens.\n * - Renders slot content without additional wrappers.\n *\n * @example\n * ```html\n * <sky-sheet bg=\"solid\" blur-level=\"md\" shadow=\"lg\" border=\"md\" radius=\"lg\">\n * <h3>Deployment Summary</h3>\n * <p>All regional checks passed. Ready to promote to production.</p>\n * </sky-sheet>\n * ```\n * ```vue\n * <template>\n * <sky-sheet bg=\"solid\" blur-level=\"md\" shadow=\"lg\" border=\"md\" radius=\"lg\">\n * <h3>Deployment Summary</h3>\n * <p>All regional checks passed. Ready to promote to production.</p>\n * </sky-sheet>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n * return (\n * <sky-sheet bg=\"solid\" blur-level=\"md\" shadow=\"lg\" border=\"md\" radius=\"lg\">\n * <h3>Deployment Summary</h3>\n * <p>All regional checks passed. Ready to promote to production.</p>\n * </sky-sheet>\n * );\n * }\n * ```\n */\n@customElement(\"sky-sheet\")\nexport class SkySheet extends LitElement {\n\n @property({ type: String, reflect: true })\n bg: SkySheetBackground = \"primary\";\n\n @property({ type: String, reflect: true })\n blurLevel: SkySheetBlurLevel = \"sm\";\n\n @property({ type: String, reflect: true })\n shadow: SkySheetShadow = \"sm\";\n\n @property({ type: String, reflect: true })\n border: SkySheetBorder = \"sm\";\n\n @property({ type: String, reflect: true })\n radius: SkySheetRadius = \"md\";\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._applyRadiusVar();\n }\n\n private _applyRadiusVar(): void {\n this.style.setProperty(\"--sheet-radius\", resolveSheetRadius(this.radius));\n }\n\n /** After PresetController hostUpdate — paint with current radius. */\n protected override update(changed: PropertyValues): void {\n if (changed.size === 0 || changed.has(\"radius\") || changed.has(\"preset\")) {\n this._applyRadiusVar();\n }\n super.update(changed);\n }\n\n\n /** Named prop preset from nearest `sky-config-provider`. */\n @property({ type: String, reflect: true }) preset = \"\";\n\n private _presets = new PresetController(this);\n\n static override styles = css`\n :host {\n display: block;\n box-sizing: border-box;\n font-family: var(--sky-font);\n width: 100%;\n height: 100%;\n padding: var(--sky-space-3, 12px);\n border-radius: var(--sheet-radius, var(--sky-radius-secondary));\n }\n\n /* background */\n :host([bg=\"primary\"]) {\n background: var(--sky-glass-primary);\n }\n :host([bg=\"secondary\"]) {\n background: var(--sky-glass-secondary);\n }\n :host([bg=\"tertiary\"]) {\n background: var(--sky-glass-tertiary);\n }\n :host([bg=\"solid\"]) {\n background: var(--sky-glass-solid);\n background-image: none;\n backdrop-filter: none;\n -webkit-backdrop-filter: none;\n }\n :host([bg=\"transparent\"]) {\n background: transparent;\n background-image: none;\n }\n\n :host([bg=\"primary\"]:not([blurLevel=\"none\"])),\n :host([bg=\"secondary\"]:not([blurLevel=\"none\"])),\n :host([bg=\"tertiary\"]:not([blurLevel=\"none\"])) {\n background-image: var(--sky-glass-surface);\n }\n\n :host([blurLevel=\"none\"]) {\n backdrop-filter: none;\n -webkit-backdrop-filter: none;\n }\n :host([blurLevel=\"sm\"]) {\n backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)\n var(--sky-saturation-primary);\n -webkit-backdrop-filter: var(--sky-blur-primary)\n var(--sky-brightness-primary) var(--sky-saturation-primary);\n }\n :host([blurLevel=\"md\"]) {\n backdrop-filter: var(--sky-blur-secondary) var(--sky-brightness-secondary)\n var(--sky-saturation-secondary);\n -webkit-backdrop-filter: var(--sky-blur-secondary)\n var(--sky-brightness-secondary) var(--sky-saturation-secondary);\n }\n :host([blurLevel=\"lg\"]) {\n backdrop-filter: var(--sky-blur-tertiary) var(--sky-brightness-tertiary)\n var(--sky-saturation-tertiary);\n -webkit-backdrop-filter: var(--sky-blur-tertiary)\n var(--sky-brightness-tertiary) var(--sky-saturation-tertiary);\n }\n\n /* shadow */\n :host([shadow=\"none\"]) {\n box-shadow: none;\n }\n :host([shadow=\"sm\"]) {\n box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-primary);\n }\n :host([shadow=\"md\"]) {\n box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-secondary);\n }\n :host([shadow=\"lg\"]) {\n box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-tertiary);\n }\n :host([shadow=\"inset\"]) {\n box-shadow: var(--sky-box-shadow-inset);\n }\n\n /* border */\n :host([border=\"none\"]) {\n border: none;\n }\n :host([border=\"sm\"]) {\n border: var(--sky-border-primary);\n }\n :host([border=\"md\"]) {\n border: var(--sky-border-secondary);\n }\n :host([border=\"lg\"]) {\n border: var(--sky-border-tertiary);\n }\n `;\n\n override render() {\n return html`<slot></slot>`;\n }\n}\n"],"names":["SHEET_RADIUS_PRESETS","none","sm","md","lg","xl","resolveSheetRadius","input","Object","prototype","hasOwnProperty","call","resolveRadius","SkySheet","LitElement","constructor","super","arguments","this","bg","blurLevel","shadow","border","radius","preset","_presets","PresetController","connectedCallback","_applyRadiusVar","style","setProperty","update","changed","size","has","render","html","styles","css","__decorateClass","property","type","String","reflect","customElement"],"mappings":"mcAaA,MAAMA,EAA+C,CACnDC,KAAM,IACNC,GAAI,4BACJC,GAAI,8BACJC,GAAI,6BACJC,GAAI,0BAIC,SAASC,EAAmBC,GACjC,OAAIC,OAAOC,UAAUC,eAAeC,KAAKX,EAAsBO,GACtDP,EAAqBO,GAEvBK,EAAcL,EACvB,CAqDO,IAAMM,EAAN,cAAuBC,EAAvB,WAAAC,GAAAC,SAAAC,WAGLC,KAAAC,GAAyB,UAGzBD,KAAAE,UAA+B,KAG/BF,KAAAG,OAAyB,KAGzBH,KAAAI,OAAyB,KAGzBJ,KAAAK,OAAyB,KAqBkBL,KAAAM,OAAS,GAEpDN,KAAQO,SAAW,IAAIC,EAAiBR,KAAI,CArBnC,iBAAAS,GACPX,MAAMW,oBACNT,KAAKU,iBACP,CAEQ,eAAAA,GACNV,KAAKW,MAAMC,YAAY,iBAAkBxB,EAAmBY,KAAKK,QACnE,CAGmB,MAAAQ,CAAOC,IACH,IAAjBA,EAAQC,MAAcD,EAAQE,IAAI,WAAaF,EAAQE,IAAI,YAC7DhB,KAAKU,kBAEPZ,MAAMe,OAAOC,EACf,CAqGS,MAAAG,GACP,OAAOC,CAAA,eACT,GAvIWvB,EAwCKwB,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IArCzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAFxB9B,EAGXJ,UAAA,KAAA,GAGA8B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KALxB9B,EAMXJ,UAAA,YAAA,GAGA8B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KARxB9B,EASXJ,UAAA,SAAA,GAGA8B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAXxB9B,EAYXJ,UAAA,SAAA,GAGA8B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAdxB9B,EAeXJ,UAAA,SAAA,GAqB2C8B,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KApCxB9B,EAoCgCJ,UAAA,SAAA,GApChCI,EAAN0B,EAAA,CADNK,EAAc,cACF/B"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { LitElement } from
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
2
|
export type SkySimpleTableCellValue = string | number | boolean | null | undefined | Date;
|
|
3
3
|
export type SkySimpleTableRow = Record<string, SkySimpleTableCellValue>;
|
|
4
4
|
export type SkySimpleTableColumn = {
|
|
5
5
|
key: string;
|
|
6
6
|
label?: string;
|
|
7
7
|
header?: string;
|
|
8
|
-
align?:
|
|
8
|
+
align?: "left" | "center" | "right";
|
|
9
9
|
width?: string;
|
|
10
10
|
};
|
|
11
11
|
/**
|
|
@@ -29,6 +29,7 @@ export type SkySimpleTableColumn = {
|
|
|
29
29
|
* @property {SkySimpleTableColumn[]} columns - Column definitions. Uses first row keys when omitted.
|
|
30
30
|
* @property {SkySimpleTableColumn[]} column - Alias for `columns`.
|
|
31
31
|
* @property {string} emptyText - Message shown when there are no rows.
|
|
32
|
+
* @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
|
|
32
33
|
*
|
|
33
34
|
* @example
|
|
34
35
|
* ```html
|
|
@@ -53,6 +54,9 @@ export declare class SkySimpleTable extends LitElement {
|
|
|
53
54
|
emptyText: string;
|
|
54
55
|
get column(): SkySimpleTableColumn[];
|
|
55
56
|
set column(value: SkySimpleTableColumn[] | null | undefined);
|
|
57
|
+
/** Named prop preset from nearest `sky-config-provider`. */
|
|
58
|
+
preset: string;
|
|
59
|
+
private _presets;
|
|
56
60
|
static styles: import("lit").CSSResult;
|
|
57
61
|
private get _safeData();
|
|
58
62
|
private get _resolvedColumns();
|
|
@@ -63,6 +67,6 @@ export declare class SkySimpleTable extends LitElement {
|
|
|
63
67
|
}
|
|
64
68
|
declare global {
|
|
65
69
|
interface HTMLElementTagNameMap {
|
|
66
|
-
|
|
70
|
+
"sky-simple-table": SkySimpleTable;
|
|
67
71
|
}
|
|
68
72
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{css as t,LitElement as r,html as e,nothing as a}from"lit";import{property as s,customElement as o}from"lit/decorators.js";import{repeat as l}from"lit/directives/repeat.js";import{styleMap as i}from"lit/directives/style-map.js";var
|
|
1
|
+
import{css as t,LitElement as r,html as e,nothing as a}from"lit";import{property as s,customElement as o}from"lit/decorators.js";import{repeat as l}from"lit/directives/repeat.js";import{styleMap as i}from"lit/directives/style-map.js";import{PresetController as p}from"../helper/controllers/preset-controller.js";var n=Object.defineProperty,y=Object.getOwnPropertyDescriptor,d=(t,r,e,a)=>{for(var s,o=a>1?void 0:a?y(r,e):r,l=t.length-1;l>=0;l--)(s=t[l])&&(o=(a?s(r,e,o):s(o))||o);return a&&o&&n(r,e,o),o};let c=class extends r{constructor(){super(...arguments),this.data=[],this.columns=[],this.emptyText="No data available",this.preset="",this._presets=new p(this)}get column(){return this.columns}set column(t){const r=this.columns;this.columns=Array.isArray(t)?t:[],this.requestUpdate("column",r)}get _safeData(){return Array.isArray(this.data)?this.data:[]}get _resolvedColumns(){if(Array.isArray(this.columns)&&this.columns.length>0)return this.columns.filter(t=>Boolean(t?.key));const t=this._safeData[0];return t?Object.keys(t).map(t=>({key:t,label:this._toTitle(t)})):[]}_toTitle(t){return t.replace(/[_-]+/g," ").replace(/([a-z])([A-Z])/g,"$1 $2").replace(/\b\w/g,t=>t.toUpperCase())}_formatCell(t){return null==t?"":t instanceof Date?t.toLocaleDateString():String(t)}_cellStyle(t){return{textAlign:t.align,width:t.width}}render(){const t=this._safeData,r=this._resolvedColumns;return t.length&&r.length?e`
|
|
2
2
|
<div class="wrapper" part="wrapper">
|
|
3
3
|
<table part="table">
|
|
4
4
|
<thead>
|
|
@@ -17,10 +17,7 @@ import{css as t,LitElement as r,html as e,nothing as a}from"lit";import{property
|
|
|
17
17
|
${l(t,(t,r)=>String(t.id??r),t=>e`
|
|
18
18
|
<tr part="row">
|
|
19
19
|
${l(r,t=>t.key,r=>e`
|
|
20
|
-
<td
|
|
21
|
-
part="cell"
|
|
22
|
-
style=${i(this._cellStyle(r))}
|
|
23
|
-
>
|
|
20
|
+
<td part="cell" style=${i(this._cellStyle(r))}>
|
|
24
21
|
${this._formatCell(t[r.key])||a}
|
|
25
22
|
</td>
|
|
26
23
|
`)}
|
|
@@ -33,7 +30,7 @@ import{css as t,LitElement as r,html as e,nothing as a}from"lit";import{property
|
|
|
33
30
|
<div class="wrapper" part="wrapper">
|
|
34
31
|
<div class="empty" part="empty">${this.emptyText}</div>
|
|
35
32
|
</div>
|
|
36
|
-
`}};
|
|
33
|
+
`}};c.styles=t`
|
|
37
34
|
:host {
|
|
38
35
|
display: block;
|
|
39
36
|
width: 100%;
|
|
@@ -99,5 +96,5 @@ import{css as t,LitElement as r,html as e,nothing as a}from"lit";import{property
|
|
|
99
96
|
text-align: center;
|
|
100
97
|
font-size: var(--sky-font-size-sm, 0.875rem);
|
|
101
98
|
}
|
|
102
|
-
`,
|
|
99
|
+
`,d([s({type:Array})],c.prototype,"data",2),d([s({type:Array})],c.prototype,"columns",2),d([s({type:String})],c.prototype,"emptyText",2),d([s({type:Array})],c.prototype,"column",1),d([s({type:String,reflect:!0})],c.prototype,"preset",2),c=d([o("sky-simple-table")],c);export{c as SkySimpleTable};
|
|
103
100
|
//# sourceMappingURL=sky-simple-table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sky-simple-table.js","sources":["../../src/sky-simple-table/sky-simple-table.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nexport type SkySimpleTableCellValue =\n string | number | boolean | null | undefined | Date;\n\nexport type SkySimpleTableRow = Record<string, SkySimpleTableCellValue>;\n\nexport type SkySimpleTableColumn = {\n key: string;\n label?: string;\n header?: string;\n align?: 'left' | 'center' | 'right';\n width?: string;\n};\n\n/**\n * @element sky-simple-table\n *\n * @summary Lightweight table for rendering simple object rows from `data` and `columns` props.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/simple-table\n *\n * @csspart wrapper - Scrollable table wrapper.\n * @csspart table - The native table element.\n * @csspart header-cell - Header cells.\n * @csspart row - Body rows.\n * @csspart cell - Body cells.\n * @csspart empty - Empty state message.\n *\n * @property {SkySimpleTableRow[]} data - Plain object rows.\n * @property {SkySimpleTableColumn[]} columns - Column definitions. Uses first row keys when omitted.\n * @property {SkySimpleTableColumn[]} column - Alias for `columns`.\n * @property {string} emptyText - Message shown when there are no rows.\n *\n * @example\n * ```html\n * <sky-simple-table></sky-simple-table>\n * <script>\n * const table = document.querySelector(\"sky-simple-table\");\n * table.columns = [\n * { key: \"name\", label: \"Name\" },\n * { key: \"role\", label: \"Role\" },\n * { key: \"status\", label: \"Status\" },\n * ];\n * table.data = [\n * { name: \"Aarav Patel\", role: \"Designer\", status: \"Active\" },\n * { name: \"Maya Shah\", role: \"Engineer\", status: \"Away\" },\n * ];\n * </script>\n * ```\n */\n@customElement('sky-simple-table')\nexport class SkySimpleTable extends LitElement {\n @property({ type: Array }) data: SkySimpleTableRow[] = [];\n @property({ type: Array }) columns: SkySimpleTableColumn[] = [];\n @property({ type: String }) emptyText = 'No data available';\n\n @property({ type: Array })\n get column(): SkySimpleTableColumn[] {\n return this.columns;\n }\n\n set column(value: SkySimpleTableColumn[] | null | undefined) {\n const old = this.columns;\n this.columns = Array.isArray(value) ? value : [];\n this.requestUpdate('column', old);\n }\n\n static styles = css`\n :host {\n display: block;\n width: 100%;\n color: var(--sky-text-primary);\n font-family: var(--sky-font);\n }\n\n .wrapper {\n width: 100%;\n overflow-x: auto;\n border: var(--sky-border-primary);\n border-radius: var(--sky-radius-secondary);\n background: var(--sky-glass-primary);\n box-shadow: var(--sky-box-shadow-primary);\n }\n\n table {\n width: 100%;\n min-width: max-content;\n border-collapse: collapse;\n font-size: var(--sky-font-size-sm, 0.875rem);\n }\n\n thead {\n background: var(--sky-glass-secondary);\n }\n\n th,\n td {\n box-sizing: border-box;\n padding: var(--sky-space-3, 12px) var(--sky-space-4, 16px);\n border-bottom: 1px solid var(--sky-border-light);\n text-align: left;\n white-space: nowrap;\n }\n\n th {\n color: var(--sky-text-secondary);\n font-weight: 700;\n letter-spacing: 0.02em;\n }\n\n td {\n color: var(--sky-text-primary);\n }\n\n tbody tr:last-child td {\n border-bottom: 0;\n }\n\n tbody tr {\n transition: background var(--sky-duration-fast, 120ms)\n var(--sky-ease-default, ease);\n }\n\n tbody tr:hover {\n background: var(--sky-hover-primary);\n }\n\n .empty {\n padding: var(--sky-space-6, 24px);\n color: var(--sky-text-secondary);\n text-align: center;\n font-size: var(--sky-font-size-sm, 0.875rem);\n }\n `;\n\n private get _safeData(): SkySimpleTableRow[] {\n return Array.isArray(this.data) ? this.data : [];\n }\n\n private get _resolvedColumns(): SkySimpleTableColumn[] {\n if (Array.isArray(this.columns) && this.columns.length > 0) {\n return this.columns.filter((column) => Boolean(column?.key));\n }\n\n const firstRow = this._safeData[0];\n if (!firstRow) return [];\n\n return Object.keys(firstRow).map((key) => ({\n key,\n label: this._toTitle(key),\n }));\n }\n\n private _toTitle(value: string): string {\n return value\n .replace(/[_-]+/g, ' ')\n .replace(/([a-z])([A-Z])/g, '$1 $2')\n .replace(/\\b\\w/g, (char) => char.toUpperCase());\n }\n\n private _formatCell(value: SkySimpleTableCellValue): string {\n if (value === null || value === undefined) return '';\n if (value instanceof Date) return value.toLocaleDateString();\n return String(value);\n }\n\n private _cellStyle(column: SkySimpleTableColumn) {\n return {\n textAlign: column.align,\n width: column.width,\n };\n }\n\n render() {\n const rows = this._safeData;\n const columns = this._resolvedColumns;\n\n if (!rows.length || !columns.length) {\n return html`\n <div class=\"wrapper\" part=\"wrapper\">\n <div class=\"empty\" part=\"empty\">${this.emptyText}</div>\n </div>\n `;\n }\n\n return html`\n <div class=\"wrapper\" part=\"wrapper\">\n <table part=\"table\">\n <thead>\n <tr>\n ${repeat(\n columns,\n (column) => column.key,\n (column) => html`\n <th\n part=\"header-cell\"\n style=${styleMap(this._cellStyle(column))}\n >\n ${column.header ?? column.label ?? this._toTitle(column.key)}\n </th>\n `\n )}\n </tr>\n </thead>\n <tbody>\n ${repeat(\n rows,\n (row, index) => String(row.id ?? index),\n (row) => html`\n <tr part=\"row\">\n ${repeat(\n columns,\n (column) => column.key,\n (column) => html`\n <td\n part=\"cell\"\n style=${styleMap(this._cellStyle(column))}\n >\n ${this._formatCell(row[column.key]) || nothing}\n </td>\n `\n )}\n </tr>\n `\n )}\n </tbody>\n </table>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sky-simple-table': SkySimpleTable;\n }\n}\n"],"names":["SkySimpleTable","LitElement","constructor","super","arguments","this","data","columns","emptyText","column","value","old","Array","isArray","requestUpdate","_safeData","_resolvedColumns","length","filter","Boolean","key","firstRow","Object","keys","map","label","_toTitle","replace","char","toUpperCase","_formatCell","Date","toLocaleDateString","String","_cellStyle","textAlign","align","width","render","rows","html","repeat","styleMap","header","row","index","id","nothing","styles","css","__decorateClass","property","type","prototype","customElement"],"mappings":"0aA0DO,IAAMA,EAAN,cAA6BC,EAA7B,WAAAC,GAAAC,SAAAC,WACsBC,KAAAC,KAA4B,GAC5BD,KAAAE,QAAkC,GACjCF,KAAAG,UAAY,mBAAA,CAGxC,UAAIC,GACF,OAAOJ,KAAKE,OACd,CAEA,UAAIE,CAAOC,GACT,MAAMC,EAAMN,KAAKE,QACjBF,KAAKE,QAAUK,MAAMC,QAAQH,GAASA,EAAQ,GAC9CL,KAAKS,cAAc,SAAUH,EAC/B,CAsEA,aAAYI,GACV,OAAOH,MAAMC,QAAQR,KAAKC,MAAQD,KAAKC,KAAO,EAChD,CAEA,oBAAYU,GACV,GAAIJ,MAAMC,QAAQR,KAAKE,UAAYF,KAAKE,QAAQU,OAAS,EACvD,OAAOZ,KAAKE,QAAQW,OAAQT,GAAWU,QAAQV,GAAQW,MAGzD,MAAMC,EAAWhB,KAAKU,UAAU,GAChC,OAAKM,EAEEC,OAAOC,KAAKF,GAAUG,IAAKJ,IAAA,CAChCA,MACAK,MAAOpB,KAAKqB,SAASN,MAJD,EAMxB,CAEQ,QAAAM,CAAShB,GACf,OAAOA,EACJiB,QAAQ,SAAU,KAClBA,QAAQ,kBAAmB,SAC3BA,QAAQ,QAAUC,GAASA,EAAKC,cACrC,CAEQ,WAAAC,CAAYpB,GAClB,OAAIA,QAA8C,GAC9CA,aAAiBqB,KAAarB,EAAMsB,qBACjCC,OAAOvB,EAChB,CAEQ,UAAAwB,CAAWzB,GACjB,MAAO,CACL0B,UAAW1B,EAAO2B,MAClBC,MAAO5B,EAAO4B,MAElB,CAEA,MAAAC,GACE,MAAMC,EAAOlC,KAAKU,UACZR,EAAUF,KAAKW,iBAErB,OAAKuB,EAAKtB,QAAWV,EAAQU,OAQtBuB,CAAA;;;;;gBAKKC,EACAlC,EACCE,GAAWA,EAAOW,IAClBX,GAAW+B,CAAA;;;4BAGAE,EAASrC,KAAK6B,WAAWzB;;sBAE/BA,EAAOkC,QAAUlC,EAAOgB,OAASpB,KAAKqB,SAASjB,EAAOW;;;;;;cAO9DqB,EACAF,EACA,CAACK,EAAKC,IAAUZ,OAAOW,EAAIE,IAAMD,GAChCD,GAAQJ,CAAA;;oBAEHC,EACAlC,EACCE,GAAWA,EAAOW,IAClBX,GAAW+B,CAAA;;;gCAGAE,EAASrC,KAAK6B,WAAWzB;;0BAE/BJ,KAAKyB,YAAYc,EAAInC,EAAOW,OAAS2B;;;;;;;;MAxClDP,CAAA;;4CAE+BnC,KAAKG;;OAiD/C,GAlLWR,EAgBJgD,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAfWC,EAAA,CAA1BC,EAAS,CAAEC,KAAMxC,SADPZ,EACgBqD,UAAA,OAAA,GACAH,EAAA,CAA1BC,EAAS,CAAEC,KAAMxC,SAFPZ,EAEgBqD,UAAA,UAAA,GACCH,EAAA,CAA3BC,EAAS,CAAEC,KAAMnB,UAHPjC,EAGiBqD,UAAA,YAAA,GAGxBH,EAAA,CADHC,EAAS,CAAEC,KAAMxC,SALPZ,EAMPqD,UAAA,SAAA,GANOrD,EAANkD,EAAA,CADNI,EAAc,qBACFtD"}
|
|
1
|
+
{"version":3,"file":"sky-simple-table.js","sources":["../../src/sky-simple-table/sky-simple-table.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { repeat } from \"lit/directives/repeat.js\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\n\r\nexport type SkySimpleTableCellValue =\r\n | string\r\n | number\r\n | boolean\r\n | null\r\n | undefined\r\n | Date;\r\n\r\nexport type SkySimpleTableRow = Record<string, SkySimpleTableCellValue>;\r\n\r\nexport type SkySimpleTableColumn = {\r\n key: string;\r\n label?: string;\r\n header?: string;\r\n align?: \"left\" | \"center\" | \"right\";\r\n width?: string;\r\n};\r\n\r\n/**\r\n * @element sky-simple-table\r\n *\r\n * @summary Lightweight table for rendering simple object rows from `data` and `columns` props.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://sky-ui.com/components/simple-table\r\n *\r\n * @csspart wrapper - Scrollable table wrapper.\r\n * @csspart table - The native table element.\r\n * @csspart header-cell - Header cells.\r\n * @csspart row - Body rows.\r\n * @csspart cell - Body cells.\r\n * @csspart empty - Empty state message.\r\n *\r\n * @property {SkySimpleTableRow[]} data - Plain object rows.\r\n * @property {SkySimpleTableColumn[]} columns - Column definitions. Uses first row keys when omitted.\r\n * @property {SkySimpleTableColumn[]} column - Alias for `columns`.\r\n * @property {string} emptyText - Message shown when there are no rows.\r\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\n *\r\n * @example\r\n * ```html\r\n * <sky-simple-table></sky-simple-table>\r\n * <script>\r\n * const table = document.querySelector(\"sky-simple-table\");\r\n * table.columns = [\r\n * { key: \"name\", label: \"Name\" },\r\n * { key: \"role\", label: \"Role\" },\r\n * { key: \"status\", label: \"Status\" },\r\n * ];\r\n * table.data = [\r\n * { name: \"Aarav Patel\", role: \"Designer\", status: \"Active\" },\r\n * { name: \"Maya Shah\", role: \"Engineer\", status: \"Away\" },\r\n * ];\r\n * </script>\r\n * ```\r\n */\r\n@customElement(\"sky-simple-table\")\r\nexport class SkySimpleTable extends LitElement {\r\n @property({ type: Array }) data: SkySimpleTableRow[] = [];\r\n @property({ type: Array }) columns: SkySimpleTableColumn[] = [];\r\n @property({ type: String }) emptyText = \"No data available\";\r\n\r\n @property({ type: Array })\r\n get column(): SkySimpleTableColumn[] {\r\n return this.columns;\r\n }\r\n\r\n set column(value: SkySimpleTableColumn[] | null | undefined) {\r\n const old = this.columns;\r\n this.columns = Array.isArray(value) ? value : [];\r\n this.requestUpdate(\"column\", old);\r\n }\r\n\r\n\n /** Named prop preset from nearest `sky-config-provider`. */\n @property({ type: String, reflect: true }) preset = \"\";\n\n private _presets = new PresetController(this);\n\n static styles = css`\r\n :host {\r\n display: block;\r\n width: 100%;\r\n color: var(--sky-text-primary);\r\n font-family: var(--sky-font);\r\n }\r\n\r\n .wrapper {\r\n width: 100%;\r\n overflow-x: auto;\r\n border: var(--sky-border-primary);\r\n border-radius: var(--sky-radius-secondary);\r\n background: var(--sky-glass-primary);\r\n box-shadow: var(--sky-box-shadow-primary);\r\n }\r\n\r\n table {\r\n width: 100%;\r\n min-width: max-content;\r\n border-collapse: collapse;\r\n font-size: var(--sky-font-size-sm, 0.875rem);\r\n }\r\n\r\n thead {\r\n background: var(--sky-glass-secondary);\r\n }\r\n\r\n th,\r\n td {\r\n box-sizing: border-box;\r\n padding: var(--sky-space-3, 12px) var(--sky-space-4, 16px);\r\n border-bottom: 1px solid var(--sky-border-light);\r\n text-align: left;\r\n white-space: nowrap;\r\n }\r\n\r\n th {\r\n color: var(--sky-text-secondary);\r\n font-weight: 700;\r\n letter-spacing: 0.02em;\r\n }\r\n\r\n td {\r\n color: var(--sky-text-primary);\r\n }\r\n\r\n tbody tr:last-child td {\r\n border-bottom: 0;\r\n }\r\n\r\n tbody tr {\r\n transition: background var(--sky-duration-fast, 120ms)\r\n var(--sky-ease-default, ease);\r\n }\r\n\r\n tbody tr:hover {\r\n background: var(--sky-hover-primary);\r\n }\r\n\r\n .empty {\r\n padding: var(--sky-space-6, 24px);\r\n color: var(--sky-text-secondary);\r\n text-align: center;\r\n font-size: var(--sky-font-size-sm, 0.875rem);\r\n }\r\n `;\r\n\r\n private get _safeData(): SkySimpleTableRow[] {\r\n return Array.isArray(this.data) ? this.data : [];\r\n }\r\n\r\n private get _resolvedColumns(): SkySimpleTableColumn[] {\r\n if (Array.isArray(this.columns) && this.columns.length > 0) {\r\n return this.columns.filter((column) => Boolean(column?.key));\r\n }\r\n\r\n const firstRow = this._safeData[0];\r\n if (!firstRow) return [];\r\n\r\n return Object.keys(firstRow).map((key) => ({\r\n key,\r\n label: this._toTitle(key),\r\n }));\r\n }\r\n\r\n private _toTitle(value: string): string {\r\n return value\r\n .replace(/[_-]+/g, \" \")\r\n .replace(/([a-z])([A-Z])/g, \"$1 $2\")\r\n .replace(/\\b\\w/g, (char) => char.toUpperCase());\r\n }\r\n\r\n private _formatCell(value: SkySimpleTableCellValue): string {\r\n if (value === null || value === undefined) return \"\";\r\n if (value instanceof Date) return value.toLocaleDateString();\r\n return String(value);\r\n }\r\n\r\n private _cellStyle(column: SkySimpleTableColumn) {\r\n return {\r\n textAlign: column.align,\r\n width: column.width,\r\n };\r\n }\r\n\r\n render() {\r\n const rows = this._safeData;\r\n const columns = this._resolvedColumns;\r\n\r\n if (!rows.length || !columns.length) {\r\n return html`\r\n <div class=\"wrapper\" part=\"wrapper\">\r\n <div class=\"empty\" part=\"empty\">${this.emptyText}</div>\r\n </div>\r\n `;\r\n }\r\n\r\n return html`\r\n <div class=\"wrapper\" part=\"wrapper\">\r\n <table part=\"table\">\r\n <thead>\r\n <tr>\r\n ${repeat(\r\n columns,\r\n (column) => column.key,\r\n (column) => html`\r\n <th\r\n part=\"header-cell\"\r\n style=${styleMap(this._cellStyle(column))}\r\n >\r\n ${column.header ?? column.label ?? this._toTitle(column.key)}\r\n </th>\r\n `,\r\n )}\r\n </tr>\r\n </thead>\r\n <tbody>\r\n ${repeat(\r\n rows,\r\n (row, index) => String(row.id ?? index),\r\n (row) => html`\r\n <tr part=\"row\">\r\n ${repeat(\r\n columns,\r\n (column) => column.key,\r\n (column) => html`\r\n <td part=\"cell\" style=${styleMap(this._cellStyle(column))}>\r\n ${this._formatCell(row[column.key]) || nothing}\r\n </td>\r\n `,\r\n )}\r\n </tr>\r\n `,\r\n )}\r\n </tbody>\r\n </table>\r\n </div>\r\n `;\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"sky-simple-table\": SkySimpleTable;\r\n }\r\n}\r\n"],"names":["SkySimpleTable","LitElement","constructor","super","arguments","this","data","columns","emptyText","preset","_presets","PresetController","column","value","old","Array","isArray","requestUpdate","_safeData","_resolvedColumns","length","filter","Boolean","key","firstRow","Object","keys","map","label","_toTitle","replace","char","toUpperCase","_formatCell","Date","toLocaleDateString","String","_cellStyle","textAlign","align","width","render","rows","html","repeat","styleMap","header","row","index","id","nothing","styles","css","__decorateClass","property","type","prototype","reflect","customElement"],"mappings":"wfAiEO,IAAMA,EAAN,cAA6BC,EAA7B,WAAAC,GAAAC,SAAAC,WACsBC,KAAAC,KAA4B,GAC5BD,KAAAE,QAAkC,GACjCF,KAAAG,UAAY,oBAeGH,KAAAI,OAAS,GAEpDJ,KAAQK,SAAW,IAAIC,EAAiBN,KAAI,CAd5C,UAAIO,GACF,OAAOP,KAAKE,OACd,CAEA,UAAIK,CAAOC,GACT,MAAMC,EAAMT,KAAKE,QACjBF,KAAKE,QAAUQ,MAAMC,QAAQH,GAASA,EAAQ,GAC9CR,KAAKY,cAAc,SAAUH,EAC/B,CA4EA,aAAYI,GACV,OAAOH,MAAMC,QAAQX,KAAKC,MAAQD,KAAKC,KAAO,EAChD,CAEA,oBAAYa,GACV,GAAIJ,MAAMC,QAAQX,KAAKE,UAAYF,KAAKE,QAAQa,OAAS,EACvD,OAAOf,KAAKE,QAAQc,OAAQT,GAAWU,QAAQV,GAAQW,MAGzD,MAAMC,EAAWnB,KAAKa,UAAU,GAChC,OAAKM,EAEEC,OAAOC,KAAKF,GAAUG,IAAKJ,IAAA,CAChCA,MACAK,MAAOvB,KAAKwB,SAASN,MAJD,EAMxB,CAEQ,QAAAM,CAAShB,GACf,OAAOA,EACJiB,QAAQ,SAAU,KAClBA,QAAQ,kBAAmB,SAC3BA,QAAQ,QAAUC,GAASA,EAAKC,cACrC,CAEQ,WAAAC,CAAYpB,GAClB,OAAIA,QAA8C,GAC9CA,aAAiBqB,KAAarB,EAAMsB,qBACjCC,OAAOvB,EAChB,CAEQ,UAAAwB,CAAWzB,GACjB,MAAO,CACL0B,UAAW1B,EAAO2B,MAClBC,MAAO5B,EAAO4B,MAElB,CAEA,MAAAC,GACE,MAAMC,EAAOrC,KAAKa,UACZX,EAAUF,KAAKc,iBAErB,OAAKuB,EAAKtB,QAAWb,EAAQa,OAQtBuB,CAAA;;;;;gBAKKC,EACArC,EACCK,GAAWA,EAAOW,IAClBX,GAAW+B,CAAA;;;4BAGAE,EAASxC,KAAKgC,WAAWzB;;sBAE/BA,EAAOkC,QAAUlC,EAAOgB,OAASvB,KAAKwB,SAASjB,EAAOW;;;;;;cAO9DqB,EACAF,EACA,CAACK,EAAKC,IAAUZ,OAAOW,EAAIE,IAAMD,GAChCD,GAAQJ,CAAA;;oBAEHC,EACArC,EACCK,GAAWA,EAAOW,IAClBX,GAAW+B,CAAA;8CACcE,EAASxC,KAAKgC,WAAWzB;0BAC7CP,KAAK4B,YAAYc,EAAInC,EAAOW,OAAS2B;;;;;;;;MArClDP,CAAA;;4CAE+BtC,KAAKG;;OA8C/C,GArLWR,EAsBJmD,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IArBWC,EAAA,CAA1BC,EAAS,CAAEC,KAAMxC,SADPf,EACgBwD,UAAA,OAAA,GACAH,EAAA,CAA1BC,EAAS,CAAEC,KAAMxC,SAFPf,EAEgBwD,UAAA,UAAA,GACCH,EAAA,CAA3BC,EAAS,CAAEC,KAAMnB,UAHPpC,EAGiBwD,UAAA,YAAA,GAGxBH,EAAA,CADHC,EAAS,CAAEC,KAAMxC,SALPf,EAMPwD,UAAA,SAAA,GAYuCH,EAAA,CAA1CC,EAAS,CAAEC,KAAMnB,OAAQqB,SAAS,KAlBxBzD,EAkBgCwD,UAAA,SAAA,GAlBhCxD,EAANqD,EAAA,CADNK,EAAc,qBACF1D"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { LitElement } from
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
2
|
export interface ThemeConfig {
|
|
3
3
|
light: ThemeModeConfig;
|
|
4
4
|
dark: ThemeModeConfig;
|
|
5
5
|
}
|
|
6
|
-
export type ThemePreference =
|
|
6
|
+
export type ThemePreference = "light" | "dark" | "system";
|
|
7
7
|
export type PartialTheme = Partial<ThemeConfig>;
|
|
8
8
|
/** Extended ThemeModeConfig: added typography & spacing tokens */
|
|
9
9
|
export interface ThemeModeConfig {
|
|
@@ -15,28 +15,28 @@ export interface ThemeModeConfig {
|
|
|
15
15
|
secondary?: string;
|
|
16
16
|
tertiary?: string;
|
|
17
17
|
};
|
|
18
|
-
opacities: Record<
|
|
18
|
+
opacities: Record<"primary" | "secondary" | "tertiary" | "solid", number>;
|
|
19
19
|
};
|
|
20
20
|
glassHover: {
|
|
21
21
|
color: string;
|
|
22
|
-
opacity: Record<
|
|
22
|
+
opacity: Record<"primary" | "secondary" | "tertiary" | "solid", number>;
|
|
23
23
|
};
|
|
24
24
|
overlay: {
|
|
25
25
|
color: string;
|
|
26
|
-
opacities: Record<
|
|
26
|
+
opacities: Record<"primary" | "secondary" | "tertiary" | "solid", number>;
|
|
27
27
|
};
|
|
28
28
|
fontFamily: string;
|
|
29
29
|
/** Monospace font stack; used for --sky-font-mono and bounded mono presets */
|
|
30
30
|
fontFamilyMono?: string;
|
|
31
|
-
fontSize?: Record<
|
|
32
|
-
fontWeight?: Record<
|
|
33
|
-
lineHeight?: Record<
|
|
34
|
-
letterSpacing?: Record<
|
|
31
|
+
fontSize?: Record<"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl", string>;
|
|
32
|
+
fontWeight?: Record<"thin" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold", string>;
|
|
33
|
+
lineHeight?: Record<"tight" | "snug" | "normal" | "relaxed" | "loose", string>;
|
|
34
|
+
letterSpacing?: Record<"tighter" | "tight" | "normal" | "wide" | "wider", string>;
|
|
35
35
|
glassSurface?: {
|
|
36
36
|
top: number;
|
|
37
37
|
bottom: number;
|
|
38
38
|
};
|
|
39
|
-
spacing?: Record<
|
|
39
|
+
spacing?: Record<"0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64", string>;
|
|
40
40
|
color: {
|
|
41
41
|
background: string;
|
|
42
42
|
foreground: string;
|
|
@@ -46,22 +46,22 @@ export interface ThemeModeConfig {
|
|
|
46
46
|
danger: string;
|
|
47
47
|
info: string;
|
|
48
48
|
};
|
|
49
|
-
blur: Record<
|
|
50
|
-
radius: Record<
|
|
51
|
-
boxshadow: Record<
|
|
52
|
-
brightness: Record<
|
|
53
|
-
saturation: Record<
|
|
54
|
-
border: Record<
|
|
49
|
+
blur: Record<"primary" | "secondary" | "tertiary", string>;
|
|
50
|
+
radius: Record<"primary" | "secondary" | "tertiary" | "full", string>;
|
|
51
|
+
boxshadow: Record<"primary" | "secondary" | "tertiary" | "inset" | "hover", string>;
|
|
52
|
+
brightness: Record<"primary" | "secondary" | "tertiary", string>;
|
|
53
|
+
saturation: Record<"primary" | "secondary" | "tertiary", string>;
|
|
54
|
+
border: Record<"primary" | "secondary" | "tertiary", string>;
|
|
55
55
|
separator: string;
|
|
56
56
|
/** Motion: duration and easing for consistent, themeable transitions */
|
|
57
57
|
motion?: {
|
|
58
|
-
duration?: Record<
|
|
59
|
-
ease?: Record<
|
|
58
|
+
duration?: Record<"instant" | "fast" | "normal" | "slow", string>;
|
|
59
|
+
ease?: Record<"default" | "in" | "out" | "inOut" | "bounce", string>;
|
|
60
60
|
};
|
|
61
61
|
/** Z-index scale for predictable stacking (dropdown, modal, toast, etc.) */
|
|
62
|
-
zIndex?: Record<
|
|
62
|
+
zIndex?: Record<"base" | "dropdown" | "sticky" | "fixed" | "modal" | "popover" | "toast" | "max", number>;
|
|
63
63
|
/** Opacity tokens for disabled/muted states */
|
|
64
|
-
opacity?: Record<
|
|
64
|
+
opacity?: Record<"disabled" | "muted" | "subtle", number>;
|
|
65
65
|
/** Optional native scrollbar color tints; sizing stays platform-native. */
|
|
66
66
|
scrollbar?: {
|
|
67
67
|
thumb?: string;
|
|
@@ -71,14 +71,14 @@ export interface ThemeModeConfig {
|
|
|
71
71
|
}
|
|
72
72
|
export declare const defaultTheme: ThemeConfig;
|
|
73
73
|
export declare function getThemePreference(): ThemePreference;
|
|
74
|
-
export declare function resolveActualTheme(pref: ThemePreference):
|
|
74
|
+
export declare function resolveActualTheme(pref: ThemePreference): "light" | "dark";
|
|
75
75
|
/** Returns "light" | "dark" (prefers provider, falls back to system). SSR-safe: returns "light" when document is undefined. */
|
|
76
|
-
export declare function getCurrentTheme():
|
|
76
|
+
export declare function getCurrentTheme(): "light" | "dark";
|
|
77
77
|
/** Subscribe to theme changes. Returns an unsubscribe function. SSR-safe: returns no-op when window is undefined. */
|
|
78
|
-
export declare function onThemeChange(cb: (mode:
|
|
78
|
+
export declare function onThemeChange(cb: (mode: "light" | "dark", preference?: ThemePreference) => void): () => void;
|
|
79
79
|
export declare function mergeTheme(userTheme: Partial<ThemeConfig>): ThemeConfig;
|
|
80
80
|
export interface ThemeContextValue {
|
|
81
|
-
mode:
|
|
81
|
+
mode: "light" | "dark";
|
|
82
82
|
preference: ThemePreference;
|
|
83
83
|
theme: ThemeConfig;
|
|
84
84
|
setPreference: (pref: ThemePreference) => void;
|
|
@@ -87,10 +87,10 @@ export interface ThemeContextValue {
|
|
|
87
87
|
export declare const themeContext: {
|
|
88
88
|
__context__: ThemeContextValue;
|
|
89
89
|
};
|
|
90
|
-
type ThemeScope =
|
|
90
|
+
type ThemeScope = "root" | "host" | "both";
|
|
91
91
|
export type SkyThemeProviderScope = ThemeScope;
|
|
92
92
|
export type SkyThemeProviderGlobalChangeDetail = {
|
|
93
|
-
mode:
|
|
93
|
+
mode: "light" | "dark";
|
|
94
94
|
preference: ThemePreference;
|
|
95
95
|
};
|
|
96
96
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{css as e,LitElement as r,html as t}from"lit";import{property as o,state as s,customElement as a}from"lit/decorators.js";import{createContext as i,provide as n}from"@lit/context";var c=Object.defineProperty,l=Object.getOwnPropertyDescriptor,y=(e,r,t,o)=>{for(var s,a=o>1?void 0:o?l(r,t):r,i=e.length-1;i>=0;i--)(s=e[i])&&(a=(o?s(r,t,a):s(a))||a);return o&&a&&c(r,t,a),a};const m={light:{glass:{baseColor:"#FFFFFF",baseShades:{secondary:"#F1F5F9",tertiary:"#E2E8F0"},opacities:{primary:.1,secondary:.12,tertiary:.16,solid:.18}},overlay:{color:"#E8EEF6",opacities:{primary:.75,secondary:.33,tertiary:.19,solid:1}},glassHover:{color:"#0F172A",opacity:{primary:.06,secondary:.08,tertiary:.1,solid:1}},fontFamily:"'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",fontFamilyMono:"'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem"},fontWeight:{thin:"100",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800"},lineHeight:{tight:"1.1",snug:"1.25",normal:"1.5",relaxed:"1.75",loose:"2"},letterSpacing:{tighter:"-0.03em",tight:"-0.015em",normal:"0em",wide:"0.02em",wider:"0.04em"},spacing:{0:"0px",px:"1px",.5:"0.125rem",1:"0.25rem",1.5:"0.375rem",2:"0.5rem",2.5:"0.625rem",3:"0.75rem",3.5:"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem"},color:{background:"#E8EEF6",foreground:"#0F172A",active:"#2563EB",success:"#17C964",warning:"#F5A524",danger:"#FF383C",info:"#6366F1"},blur:{primary:"12px",secondary:"24px",tertiary:"32px"},radius:{primary:"8px",secondary:"12px",tertiary:"16px",full:"9999px"},boxshadow:{primary:"0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04)",secondary:"0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05)",tertiary:"0 4px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.06)",inset:"inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(15, 23, 42, 0.03)",hover:"0 2px 6px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.07)"},brightness:{primary:"1.04",secondary:"1.08",tertiary:"1.10"},saturation:{primary:"1.08",secondary:"1.14",tertiary:"1.20"},separator:"rgba(15, 23, 42, 0.12)",border:{primary:"1px solid rgba(15, 23, 42, 0.14)",secondary:"1px solid color-mix(in srgb, rgba(15, 23, 42, 0.14) 72%, transparent)",tertiary:"1px solid color-mix(in srgb, rgba(15, 23, 42, 0.14) 52%, transparent)"},glassSurface:{top:.14,bottom:.03},motion:{duration:{instant:"0ms",fast:"120ms",normal:"200ms",slow:"300ms"},ease:{default:"cubic-bezier(0.4, 0, 0.2, 1)",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)",inOut:"cubic-bezier(0.4, 0, 0.2, 1)",bounce:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zIndex:{base:0,dropdown:1e3,sticky:1100,fixed:1200,modal:1300,popover:1400,toast:1500,max:9999},opacity:{disabled:.5,muted:.7,subtle:.85},scrollbar:{track:"transparent",thumb:"color-mix(in oklch, color-mix(in oklch, #2563EB 36%, #0F172A 20%), transparent)",thumbHover:"color-mix(in oklch, color-mix(in oklch, #2563EB 54%, #0F172A 16%), transparent)"}},dark:{glass:{baseColor:"#141B2D",baseShades:{secondary:"#1A2235",tertiary:"#222C42"},opacities:{primary:.16,secondary:.18,tertiary:.22,solid:.24}},overlay:{color:"#0B1020",opacities:{primary:.75,secondary:.33,tertiary:.19,solid:1}},glassHover:{color:"#E2E8F0",opacity:{primary:.08,secondary:.1,tertiary:.12,solid:1}},fontFamily:"'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",fontFamilyMono:"'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem"},fontWeight:{thin:"100",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800"},lineHeight:{tight:"1.1",snug:"1.25",normal:"1.5",relaxed:"1.75",loose:"2"},letterSpacing:{tighter:"-0.03em",tight:"-0.015em",normal:"0em",wide:"0.02em",wider:"0.04em"},spacing:{0:"0px",px:"1px",.5:"0.125rem",1:"0.25rem",1.5:"0.375rem",2:"0.5rem",2.5:"0.625rem",3:"0.75rem",3.5:"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem"},color:{background:"#0B1020",foreground:"#E2E8F0",active:"#2563EB",success:"#17C964",warning:"#F7B750",danger:"#DB3B3E",info:"#818CF8"},blur:{primary:"12px",secondary:"24px",tertiary:"32px"},radius:{primary:"8px",secondary:"12px",tertiary:"16px",full:"9999px"},boxshadow:{primary:"0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.22)",secondary:"0 2px 4px rgba(0, 0, 0, 0.22), 0 4px 14px rgba(0, 0, 0, 0.26)",tertiary:"0 4px 8px rgba(0, 0, 0, 0.24), 0 8px 20px rgba(0, 0, 0, 0.3)",inset:"inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.18)",hover:"0 2px 6px rgba(0, 0, 0, 0.26), 0 6px 16px rgba(0, 0, 0, 0.32)"},brightness:{primary:"1.04",secondary:"1.08",tertiary:"1.10"},saturation:{primary:"1.08",secondary:"1.14",tertiary:"1.20"},separator:"rgba(226, 232, 240, 0.1)",border:{primary:"1px solid rgba(226, 232, 240, 0.14)",secondary:"1px solid color-mix(in srgb, rgba(226, 232, 240, 0.14) 72%, transparent)",tertiary:"1px solid color-mix(in srgb, rgba(226, 232, 240, 0.14) 52%, transparent)"},glassSurface:{top:.16,bottom:.05},motion:{duration:{instant:"0ms",fast:"120ms",normal:"200ms",slow:"300ms"},ease:{default:"cubic-bezier(0.4, 0, 0.2, 1)",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)",inOut:"cubic-bezier(0.4, 0, 0.2, 1)",bounce:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zIndex:{base:0,dropdown:1e3,sticky:1100,fixed:1200,modal:1300,popover:1400,toast:1500,max:9999},opacity:{disabled:.5,muted:.7,subtle:.85},scrollbar:{track:"transparent",thumb:"color-mix(in oklch, color-mix(in oklch, #2563EB 44%, #E2E8F0 16%), transparent)",thumbHover:"color-mix(in oklch, color-mix(in oklch, #2563EB 62%, #E2E8F0 12%), transparent)"}}};function d(){try{if("undefined"!=typeof localStorage){const e=localStorage.getItem("theme");return"light"===e||"dark"===e||"system"===e?e:"system"}}catch{}return"system"}function h(e){if("undefined"==typeof window)return"light";if("system"===e){try{if(window.matchMedia)return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}catch{}return"light"}return e}function p(){if("undefined"==typeof document)return"light";const e=document.documentElement.getAttribute("data-theme");return"light"===e||"dark"===e?e:"undefined"!=typeof matchMedia&&matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function k(e){if("undefined"==typeof window)return()=>{};const r=r=>{const{mode:t,preference:o}=r.detail||{};"light"===t||"dark"===t?e(t,o):e(p(),void 0)};return window.addEventListener("sky-theme",r),queueMicrotask(()=>e(p(),void 0)),()=>window.removeEventListener("sky-theme",r)}function u(e,r){const t=Array.isArray(e)?[...e]:{...e};for(const o in r){const s=r[o];s&&"object"==typeof s&&!Array.isArray(s)?t[o]=u(e[o],s):t[o]=s??e[o]}return t}function b(e){return{light:u(m.light,e.light??{}),dark:u(m.dark,e.dark??{})}}function g(e,r=1){const t="number"==typeof e&&Number.isFinite(e)?e:r;return Math.max(0,Math.min(1,t))}function x(e){return Number.isFinite(e)?Math.max(0,Math.min(100,Math.round(e))):100}function f(e){return/^oklch\(\s*[\d.]+\s+[\d.]+\s+[\d.]+(?:deg)?(?:\s*\/\s*[\d.]+%?)?\s*\)$/i.test(e.trim())}function v(e){return f(e),e}function $(e,r){const t=g(r),o=x(100*t);if(t<=0)return"transparent";if(t>=1)return v(e);if(f(e)){const r=e.trim();return r.includes("/")?r:r.replace(/\)$/,` / ${o}%)`)}return`color-mix(in oklch, ${e} ${o}%, transparent)`}function S(e,r,t){return`color-mix(in oklch, ${e} ${x(r)}%, ${t})`}function E(e,r){return e.split(",").map(e=>`${e.trim()}${r}`).join(",\n")}function w(e){return`\n${e} {\n scrollbar-color: var(--sky-scrollbar-thumb) var(--sky-scrollbar-track);\n}\n${E(e,"::-webkit-scrollbar-track")} {\n background: var(--sky-scrollbar-track);\n}\n${E(e,"::-webkit-scrollbar-thumb")} {\n background-color: var(--sky-scrollbar-thumb);\n}\n${E(e,"::-webkit-scrollbar-thumb:hover")} {\n background-color: var(--sky-scrollbar-thumb-hover);\n}\n`.trim()}function F(e,r){return`${r}{${Object.entries(e).map(([e,r])=>`${e.replace(/\./g,"\\.")}:${r};`).join("")}}`}function z(e,r){let t=document.getElementById(e);return t||(t=document.createElement("style"),t.id=e,document.head.appendChild(t)),t.textContent=r,t}const C=i("sky/theme");let j=class extends r{constructor(){super(...arguments),this.scope="root",this.preference=d(),this.mode="light",this.persist=!0,this.broadcast=!0,this.media=null,this.globalStyleId="sky-theme-provider-global-style",this.hostScrollbarStyleId="sky-theme-provider-host-scrollbar",this.hostSheet=null,this.hostStyleEl=null,this.rootVarsStyleId="sky-theme-vars-root",this.onSystemChange=()=>{"system"===(this.preference??d())&&(this.mode=h("system"),this.applyVariables(),this.pushContext(),this.dispatchEvent(new CustomEvent("theme-change-global",{bubbles:!0,composed:!0})))}}connectedCallback(){super.connectedCallback(),this.mode=h(this.preference),this.pushContext(),this.setupSystemWatcher(),"host"===this.scope&&this.applyVariables()}disconnectedCallback(){if(super.disconnectedCallback(),this.media?.removeEventListener("change",this.onSystemChange),this.hostStyleEl&&this.hostStyleEl.parentNode&&(this.hostStyleEl.parentNode.removeChild(this.hostStyleEl),this.hostStyleEl=null),"host"===this.scope){const e=document.getElementById(this.globalStyleId);e&&e.remove();const r=document.getElementById(this.hostScrollbarStyleId);r&&r.remove()}}firstUpdated(){"root"!==this.scope&&"both"!==this.scope||this.applyVariables()}updated(e){super.updated(e),(e.has("userTheme")||e.has("mode")||e.has("preference")||e.has("scope"))&&this.pushContext()}willUpdate(e){const r=e.has("preference"),t=e.has("scope"),o=e.has("userTheme");let s=!1;if(r||t){const e=h(this.preference);e!==this.mode&&(this.mode=e,s=!0)}const a=!!this.hasUpdated;if(("host"===this.scope||a)&&(s||t||o)&&this.applyVariables(),r||s||o||t){this.pushContext();const e="host"===this.scope&&a&&(o||r||s||t);this.broadcast&&("root"===this.scope||"both"===this.scope||e)&&this.broadcastTheme()}}setRootThemeAttrs(){const e=document.documentElement;e.toggleAttribute("data-theme-light","light"===this.mode),e.toggleAttribute("data-theme-dark","dark"===this.mode),e.setAttribute("data-theme",this.mode),e.style.colorScheme=this.mode,e.classList.toggle("dark","dark"===this.mode)}broadcastTheme(){const e={mode:this.mode,preference:this.preference};window.dispatchEvent(new CustomEvent("sky-theme",{detail:e})),window.dispatchEvent(new CustomEvent("theme-change-global",{detail:e}))}setPreference(e){try{!this.persist||"root"!==this.scope&&"both"!==this.scope||localStorage.setItem("theme",e)}catch{}this.preference=e,!this.broadcast||"root"!==this.scope&&"both"!==this.scope||this.dispatchEvent(new CustomEvent("theme-change-global",{bubbles:!0,composed:!0}))}togglePreference(){const e=this.preference??d(),r="light"===e?"dark":"dark"===e?"system":"light";return this.setPreference(r),r}setupSystemWatcher(){"undefined"!=typeof window&&window.matchMedia&&(this.media=window.matchMedia("(prefers-color-scheme: dark)"),this.media.addEventListener("change",this.onSystemChange))}ensureGlobalStyle(){if("undefined"==typeof document)return;const e=`\n body {\n font-family: var(--sky-font);\n margin: 0;\n padding: 0;\n background: var(--sky-background-color);\n color: var(--sky-text-primary);\n }\n\n html[data-sky-dialog-open="true"] {\n overflow: hidden !important;\n position: relative;\n height: 100%;\n }\n\n ${w("html, body, *")}\n `.trim();let r=document.getElementById(this.globalStyleId);r?r.textContent=e:(r=document.createElement("style"),r.id=this.globalStyleId,r.textContent=e,document.head.appendChild(r))}applyHostNativeScrollbars(e){if("undefined"!=typeof document){if(this.toggleAttribute("sky-native-scrollbars",e),!e){const e=document.getElementById(this.hostScrollbarStyleId);return void(e&&e.remove())}z(this.hostScrollbarStyleId,w("sky-theme-provider[sky-native-scrollbars], sky-theme-provider[sky-native-scrollbars] *"))}}applyVariables(){const e=function(e,r){const t={},o=(e,r)=>{null!=r&&(t[`--${e}`]=r)};o("sky-text-dark",v(r?"#FFFFFF":"#0B1020")),o("sky-text-light",v(r?"#030712":"#FFFFFF"));const s=e.fontFamily,a=e.fontFamilyMono??"ui-monospace, monospace";o("sky-font",s),o("sky-font-sans",s),o("sky-font-mono",a),o("sky-background-color",v(e.color.background)),o("sky-text-primary",v(e.color.foreground));const i=r?{secondary:82,tertiary:66,quaternary:50,quinary:36}:{secondary:76,tertiary:60,quaternary:44,quinary:30};Object.entries(i).forEach(([e,r])=>{o(`sky-text-${e}`,`color-mix(in oklch, var(--sky-text-primary) ${r}%, var(--sky-background-color))`)}),["primary","secondary","tertiary","quaternary","quinary"].forEach(e=>{o(`sky-text-${e}-hover`,`color-mix(in oklch, var(--sky-text-${e}) 86%, var(--sky-text-dark))`)});const{baseColor:n,baseShades:c,opacities:l}=e.glass,y=e.color.foreground,m=r?{primary:96,secondary:88,tertiary:78}:{primary:96,secondary:90,tertiary:82},d=c?.primary??S(n,m.primary,y),h=c?.secondary??S(n,m.secondary,y),p=c?.tertiary??S(n,m.tertiary,y),k=r?.4:.34,u={primary:g(l.primary,k),secondary:g(l.secondary??l.primary,k),tertiary:g(l.tertiary??l.primary,k),solid:g(l.solid,1)};o("sky-glass-primary",$(d,u.primary)),o("sky-glass-secondary",$(h,u.secondary)),o("sky-glass-tertiary",$(p,u.tertiary)),o("sky-glass-solid",$(n,u.solid));const b=g(e.glassSurface?.top,r?.26:.24),x=g(e.glassSurface?.bottom,r?.08:.06);o("sky-glass-surface",`linear-gradient(\n 180deg,\n ${$(h,b)},\n ${$(d,x)}\n )`),Object.entries(e.overlay.opacities).forEach(([r,t])=>{o(`sky-overlay-${r}`,$(e.overlay.color,t))}),Object.entries(e.glassHover.opacity).forEach(([r,t])=>{o(`sky-hover-${r}`,$(e.glassHover.color,t))}),Object.entries(e.border).forEach(([e,r])=>{o(`sky-border-${e}`,r)}),Object.entries(e.radius).forEach(([e,r])=>{o(`sky-radius-${e}`,r)}),Object.entries(e.blur).forEach(([e,r])=>{o(`sky-blur-${e}`,`blur(${r})`)}),Object.entries(e.brightness).forEach(([e,r])=>{o(`sky-brightness-${e}`,`brightness(${r})`)}),Object.entries(e.saturation).forEach(([e,r])=>{o(`sky-saturation-${e}`,`saturate(${r})`)}),Object.entries(e.boxshadow).forEach(([e,r])=>{o(`sky-box-shadow-${e}`,r)}),o("sky-border-light",e.separator),Object.entries(e.motion?.duration??{}).forEach(([e,r])=>{o(`sky-duration-${e}`,r)}),Object.entries(e.motion?.ease??{}).forEach(([e,r])=>{o(`sky-ease-${e}`,r)}),o("sky-transition-default",["background-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","border-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","box-shadow var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","transform var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","opacity var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))"].join(", ")),o("sky-transition-fast",["background-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","border-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","box-shadow var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","opacity var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))"].join(", ")),Object.entries(e.zIndex??{}).forEach(([e,r])=>{o(`sky-z-${e}`,String(r))}),Object.entries(e.opacity??{}).forEach(([e,r])=>{o(`sky-opacity-${e}`,String(r))});const f=e.scrollbar;o("sky-scrollbar-track",f?.track??"transparent"),o("sky-scrollbar-thumb",f?.thumb??(r?"color-mix(in oklch, var(--sky-text-tertiary) 78%, transparent)":"color-mix(in oklch, var(--sky-text-tertiary) 68%, transparent)")),o("sky-scrollbar-thumb-hover",f?.thumbHover??(r?"color-mix(in oklch, var(--sky-text-secondary) 52%, var(--sky-active-primary))":"color-mix(in oklch, var(--sky-text-secondary) 44%, var(--sky-active-primary))")),o("sky-text-shadow-on-glass",r?"0 1px 2px rgba(0,0,0,0.45)":"0 1px 1px rgba(255,255,255,0.55)");const E=["active","success","warning","danger","info"];E.forEach(r=>{const t=e.color[r];o(`sky-${r}-primary`,t),o(`sky-${r}-secondary`,`color-mix(in oklch, var(--sky-${r}-primary) 82%, var(--sky-background-color))`),o(`sky-${r}-tertiary`,`color-mix(in oklch, var(--sky-${r}-primary) 62%, var(--sky-background-color))`),o(`sky-${r}-quaternary`,`color-mix(in oklch, var(--sky-${r}-primary) 42%, var(--sky-background-color))`),o(`sky-${r}-quinary`,`color-mix(in oklch, var(--sky-${r}-primary) 24%, var(--sky-background-color))`),o(`sky-${r}-primary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 88%, var(--sky-text-dark))`),o(`sky-${r}-secondary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 72%, var(--sky-text-dark))`),o(`sky-${r}-tertiary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 56%, var(--sky-text-dark))`),o(`sky-${r}-quaternary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 40%, var(--sky-text-dark))`),o(`sky-${r}-quinary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 28%, var(--sky-text-dark))`),o(`sky-${r}-g0`,`color-mix(in oklch, var(--sky-${r}-primary) 12%, transparent)`),o(`sky-${r}-g1`,`color-mix(in oklch, var(--sky-${r}-primary) 24%, transparent)`),o(`sky-${r}-g2`,`color-mix(in oklch, var(--sky-${r}-primary) 48%, transparent)`)}),E.forEach(e=>{o(`sky-${e}-primary-hover`,`color-mix(in oklch, var(--sky-${e}-primary) 86%, var(--sky-text-dark))`),o(`sky-${e}-secondary-hover`,`color-mix(in oklch, var(--sky-${e}-secondary) 86%, var(--sky-text-dark))`),o(`sky-${e}-tertiary-hover`,`color-mix(in oklch, var(--sky-${e}-tertiary) 86%, var(--sky-text-dark))`),o(`sky-${e}-quaternary-hover`,`color-mix(in oklch, var(--sky-${e}-quaternary) 86%, var(--sky-text-dark))`),o(`sky-${e}-quinary-hover`,`color-mix(in oklch, var(--sky-${e}-quinary) 86%, var(--sky-text-dark))`)}),E.forEach(e=>{o(`sky-ring-${e}-1`,`0 0 0 1px var(--sky-${e}-primary)`),o(`sky-ring-${e}-2`,`0 0 0 2px var(--sky-${e}-primary)`),o(`sky-ring-${e}-3`,`0 0 0 3px var(--sky-${e}-primary)`),o(`sky-ring-${e}-4`,`0 0 0 4px var(--sky-${e}-primary)`),o(`sky-ring-${e}-5`,`0 0 0 5px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-1`,`inset 0 0 0 1px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-2`,`inset 0 0 0 2px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-3`,`inset 0 0 0 3px var(--sky-${e}-primary)`)}),o("sky-focus-ring","0 0 0 3px color-mix(in oklch, var(--sky-active-primary) 42%, transparent)"),o("sky-focus-ring-offset","2px"),o("sky-text-white","oklch(1 0 0)"),o("sky-text-black","oklch(0 0 0)"),o("sky-on-color-fallback-light","var(--sky-text-white)"),o("sky-on-color-fallback-dark","var(--sky-text-black)"),o("sky-on-active-primary","var(--sky-on-color-fallback-light)"),o("sky-on-success-primary","var(--sky-on-color-fallback-dark)"),o("sky-on-warning-primary","var(--sky-on-color-fallback-dark)"),o("sky-on-danger-primary","var(--sky-on-color-fallback-light)"),o("sky-on-info-primary","var(--sky-on-color-fallback-light)"),Object.entries(e.fontSize??{}).forEach(([e,r])=>{o(`sky-font-size-${e}`,r)}),Object.entries(e.fontWeight??{}).forEach(([e,r])=>{o(`sky-font-weight-${e}`,r)}),Object.entries(e.lineHeight??{}).forEach(([e,r])=>{o(`sky-line-height-${e}`,r)}),Object.entries(e.letterSpacing??{}).forEach(([e,r])=>{o(`sky-letter-spacing-${e}`,r)});const w=(r,t)=>e.fontSize?.[r]??t,F=(r,t)=>e.lineHeight?.[r]??t,z=[{key:"xs",size:"xs",line:"tight"},{key:"sm",size:"sm",line:"snug"},{key:"md",size:"md",line:"normal"},{key:"lg",size:"lg",line:"snug"},{key:"xl",size:"xl",line:"snug"},{key:"2xl",size:"2xl",line:"tight"},{key:"3xl",size:"3xl",line:"tight"},{key:"4xl",size:"4xl",line:"tight"}];for(const{key:e,size:r,line:t}of z){const s=w(r,"1rem"),a=F(t,"1.5");o(`sky-font-${e}`,`${s} / ${a} var(--sky-font-sans)`),o(`sky-font-mono-${e}`,`${s} / ${a} var(--sky-font-mono)`)}Object.entries(e.spacing??{}).forEach(([e,r])=>{o(`sky-space-${e}`,r)});const C={body:{size:"md",weight:"normal",line:"normal"},label:{size:"sm",weight:"medium",line:"snug"},caption:{size:"xs",weight:"normal",line:"tight"},title:{size:"lg",weight:"semibold",line:"snug"},heading:{size:"2xl",weight:"bold",line:"tight"},display:{size:"4xl",weight:"bold",line:"tight"}},j=(r,t)=>e.fontWeight?.[r]??t;for(const[e,r]of Object.entries(C)){const t=w(r.size,"1rem"),s=j(r.weight,"400"),a=F(r.line,"1.5");o(`sky-text-${e}`,`${s} ${t}/${a} var(--sky-font-sans)`)}return t}(b(this.userTheme||{})[this.mode],"dark"===this.mode);if(this.toggleAttribute("data-theme-light","light"===this.mode),this.toggleAttribute("data-theme-dark","dark"===this.mode),"host"===this.scope||"both"===this.scope){const r=F(e,":host");if("adoptedStyleSheets"in Document.prototype&&"replaceSync"in CSSStyleSheet.prototype){if(!this.hostSheet){this.hostSheet=new CSSStyleSheet;const e=this.renderRoot.adoptedStyleSheets??[];this.renderRoot.adoptedStyleSheets=[...e,this.hostSheet]}this.hostSheet.replaceSync(r)}else this.hostStyleEl||(this.hostStyleEl=document.createElement("style"),this.renderRoot.appendChild(this.hostStyleEl)),this.hostStyleEl.textContent=r;this.style.removeProperty("color"),this.style.removeProperty("background"),this.applyHostNativeScrollbars(!0)}else this.applyHostNativeScrollbars(!1);if("root"===this.scope||"both"===this.scope){const r=F(e,":root");z(this.rootVarsStyleId,r),this.setRootThemeAttrs(),this.ensureGlobalStyle(),document.body&&(document.body.style.removeProperty("color"),document.body.style.removeProperty("background"),document.body.style.removeProperty("font-family")),this.broadcastTheme()}}pushContext(){const e=b(this.userTheme??{});this._ctx={mode:this.mode,preference:this.preference,theme:e,setPreference:e=>this.setPreference(e),togglePreference:()=>this.togglePreference()}}render(){return t`<slot></slot>`}};j.styles=e`
|
|
1
|
+
import{css as e,LitElement as r,html as t}from"lit";import{property as o,state as s,customElement as a}from"lit/decorators.js";import{createContext as i,provide as n}from"@lit/context";var c=Object.defineProperty,l=Object.getOwnPropertyDescriptor,y=(e,r,t,o)=>{for(var s,a=o>1?void 0:o?l(r,t):r,i=e.length-1;i>=0;i--)(s=e[i])&&(a=(o?s(r,t,a):s(a))||a);return o&&a&&c(r,t,a),a};const m={light:{glass:{baseColor:"#FFFFFF",baseShades:{secondary:"#F1F5F9",tertiary:"#E2E8F0"},opacities:{primary:.1,secondary:.12,tertiary:.16,solid:.18}},overlay:{color:"#E8EEF6",opacities:{primary:.75,secondary:.33,tertiary:.19,solid:1}},glassHover:{color:"#0F172A",opacity:{primary:.06,secondary:.08,tertiary:.1,solid:1}},fontFamily:"'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",fontFamilyMono:"'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem"},fontWeight:{thin:"100",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800"},lineHeight:{tight:"1.1",snug:"1.25",normal:"1.5",relaxed:"1.75",loose:"2"},letterSpacing:{tighter:"-0.03em",tight:"-0.015em",normal:"0em",wide:"0.02em",wider:"0.04em"},spacing:{0:"0px",px:"1px",.5:"0.125rem",1:"0.25rem",1.5:"0.375rem",2:"0.5rem",2.5:"0.625rem",3:"0.75rem",3.5:"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem"},color:{background:"#E8EEF6",foreground:"#0F172A",active:"#2563EB",success:"#17C964",warning:"#F5A524",danger:"#FF383C",info:"#6366F1"},blur:{primary:"12px",secondary:"24px",tertiary:"32px"},radius:{primary:"8px",secondary:"12px",tertiary:"16px",full:"9999px"},boxshadow:{primary:"0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04)",secondary:"0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05)",tertiary:"0 4px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.06)",inset:"inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(15, 23, 42, 0.03)",hover:"0 2px 6px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.07)"},brightness:{primary:"1.04",secondary:"1.08",tertiary:"1.10"},saturation:{primary:"1.08",secondary:"1.14",tertiary:"1.20"},separator:"rgba(15, 23, 42, 0.12)",border:{primary:"1px solid rgba(15, 23, 42, 0.14)",secondary:"1px solid color-mix(in srgb, rgba(15, 23, 42, 0.14) 72%, transparent)",tertiary:"1px solid color-mix(in srgb, rgba(15, 23, 42, 0.14) 52%, transparent)"},glassSurface:{top:.14,bottom:.03},motion:{duration:{instant:"0ms",fast:"120ms",normal:"200ms",slow:"300ms"},ease:{default:"cubic-bezier(0.4, 0, 0.2, 1)",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)",inOut:"cubic-bezier(0.4, 0, 0.2, 1)",bounce:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zIndex:{base:0,dropdown:1e3,sticky:1100,fixed:1200,modal:1300,popover:1400,toast:1500,max:9999},opacity:{disabled:.5,muted:.7,subtle:.85},scrollbar:{track:"transparent",thumb:"color-mix(in oklch, color-mix(in oklch, #2563EB 36%, #0F172A 20%), transparent)",thumbHover:"color-mix(in oklch, color-mix(in oklch, #2563EB 54%, #0F172A 16%), transparent)"}},dark:{glass:{baseColor:"#141B2D",baseShades:{secondary:"#1A2235",tertiary:"#222C42"},opacities:{primary:.16,secondary:.18,tertiary:.22,solid:.24}},overlay:{color:"#0B1020",opacities:{primary:.75,secondary:.33,tertiary:.19,solid:1}},glassHover:{color:"#E2E8F0",opacity:{primary:.08,secondary:.1,tertiary:.12,solid:1}},fontFamily:"'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",fontFamilyMono:"'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem"},fontWeight:{thin:"100",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800"},lineHeight:{tight:"1.1",snug:"1.25",normal:"1.5",relaxed:"1.75",loose:"2"},letterSpacing:{tighter:"-0.03em",tight:"-0.015em",normal:"0em",wide:"0.02em",wider:"0.04em"},spacing:{0:"0px",px:"1px",.5:"0.125rem",1:"0.25rem",1.5:"0.375rem",2:"0.5rem",2.5:"0.625rem",3:"0.75rem",3.5:"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem"},color:{background:"#0B1020",foreground:"#E2E8F0",active:"#2563EB",success:"#17C964",warning:"#F7B750",danger:"#DB3B3E",info:"#818CF8"},blur:{primary:"12px",secondary:"24px",tertiary:"32px"},radius:{primary:"8px",secondary:"12px",tertiary:"16px",full:"9999px"},boxshadow:{primary:"0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.22)",secondary:"0 2px 4px rgba(0, 0, 0, 0.22), 0 4px 14px rgba(0, 0, 0, 0.26)",tertiary:"0 4px 8px rgba(0, 0, 0, 0.24), 0 8px 20px rgba(0, 0, 0, 0.3)",inset:"inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.18)",hover:"0 2px 6px rgba(0, 0, 0, 0.26), 0 6px 16px rgba(0, 0, 0, 0.32)"},brightness:{primary:"1.04",secondary:"1.08",tertiary:"1.10"},saturation:{primary:"1.08",secondary:"1.14",tertiary:"1.20"},separator:"rgba(226, 232, 240, 0.1)",border:{primary:"1px solid rgba(226, 232, 240, 0.14)",secondary:"1px solid color-mix(in srgb, rgba(226, 232, 240, 0.14) 72%, transparent)",tertiary:"1px solid color-mix(in srgb, rgba(226, 232, 240, 0.14) 52%, transparent)"},glassSurface:{top:.16,bottom:.05},motion:{duration:{instant:"0ms",fast:"120ms",normal:"200ms",slow:"300ms"},ease:{default:"cubic-bezier(0.4, 0, 0.2, 1)",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)",inOut:"cubic-bezier(0.4, 0, 0.2, 1)",bounce:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zIndex:{base:0,dropdown:1e3,sticky:1100,fixed:1200,modal:1300,popover:1400,toast:1500,max:9999},opacity:{disabled:.5,muted:.7,subtle:.85},scrollbar:{track:"transparent",thumb:"color-mix(in oklch, color-mix(in oklch, #2563EB 44%, #E2E8F0 16%), transparent)",thumbHover:"color-mix(in oklch, color-mix(in oklch, #2563EB 62%, #E2E8F0 12%), transparent)"}}};function h(){try{if("undefined"!=typeof localStorage){const e=localStorage.getItem("theme");return"light"===e||"dark"===e||"system"===e?e:"system"}}catch{}return"system"}function d(e){if("undefined"==typeof window)return"light";if("system"===e){try{if(window.matchMedia)return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}catch{}return"light"}return e}function p(){if("undefined"==typeof document)return"light";const e=document.documentElement.getAttribute("data-theme");return"light"===e||"dark"===e?e:"undefined"!=typeof matchMedia&&matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function k(e){if("undefined"==typeof window)return()=>{};const r=r=>{const{mode:t,preference:o}=r.detail||{};"light"===t||"dark"===t?e(t,o):e(p(),void 0)};return window.addEventListener("sky-theme",r),queueMicrotask(()=>e(p(),void 0)),()=>window.removeEventListener("sky-theme",r)}function u(e,r){const t=Array.isArray(e)?[...e]:{...e};for(const o in r){const s=r[o];s&&"object"==typeof s&&!Array.isArray(s)?t[o]=u(e[o],s):t[o]=s??e[o]}return t}function b(e){return{light:u(m.light,e.light??{}),dark:u(m.dark,e.dark??{})}}function g(e,r=1){const t="number"==typeof e&&Number.isFinite(e)?e:r;return Math.max(0,Math.min(1,t))}function x(e){return Number.isFinite(e)?Math.max(0,Math.min(100,Math.round(e))):100}function f(e){return/^oklch\(\s*[\d.]+\s+[\d.]+\s+[\d.]+(?:deg)?(?:\s*\/\s*[\d.]+%?)?\s*\)$/i.test(e.trim())}function v(e){return f(e),e}function $(e,r){const t=g(r),o=x(100*t);if(t<=0)return"transparent";if(t>=1)return v(e);if(f(e)){const r=e.trim();return r.includes("/")?r:r.replace(/\)$/,` / ${o}%)`)}return`color-mix(in oklch, ${e} ${o}%, transparent)`}function S(e,r,t){return`color-mix(in oklch, ${e} ${x(r)}%, ${t})`}function E(e,r){return e.split(",").map(e=>`${e.trim()}${r}`).join(",\n")}function w(e){return`\n${e} {\n scrollbar-color: var(--sky-scrollbar-thumb) var(--sky-scrollbar-track);\n}\n${E(e,"::-webkit-scrollbar-track")} {\n background: var(--sky-scrollbar-track);\n}\n${E(e,"::-webkit-scrollbar-thumb")} {\n background-color: var(--sky-scrollbar-thumb);\n}\n${E(e,"::-webkit-scrollbar-thumb:hover")} {\n background-color: var(--sky-scrollbar-thumb-hover);\n}\n`.trim()}function F(e,r){return`${r}{${Object.entries(e).map(([e,r])=>`${e.replace(/\./g,"\\.")}:${r};`).join("")}}`}function z(e,r){let t=document.getElementById(e);return t||(t=document.createElement("style"),t.id=e,document.head.appendChild(t)),t.textContent=r,t}const C=i("sky/theme");let j=class extends r{constructor(){super(...arguments),this.scope="root",this.preference=h(),this.mode="light",this.persist=!0,this.broadcast=!0,this.media=null,this.globalStyleId="sky-theme-provider-global-style",this.hostScrollbarStyleId="sky-theme-provider-host-scrollbar",this.hostSheet=null,this.hostStyleEl=null,this.rootVarsStyleId="sky-theme-vars-root",this.onSystemChange=()=>{"system"===(this.preference??h())&&(this.mode=d("system"),this.applyVariables(),this.pushContext(),this.dispatchEvent(new CustomEvent("theme-change-global",{bubbles:!0,composed:!0})))}}connectedCallback(){super.connectedCallback(),this.mode=d(this.preference),this.pushContext(),this.setupSystemWatcher(),"host"===this.scope&&this.applyVariables()}disconnectedCallback(){if(super.disconnectedCallback(),this.media?.removeEventListener("change",this.onSystemChange),this.hostStyleEl&&this.hostStyleEl.parentNode&&(this.hostStyleEl.parentNode.removeChild(this.hostStyleEl),this.hostStyleEl=null),"host"===this.scope){const e=document.getElementById(this.globalStyleId);e&&e.remove();const r=document.getElementById(this.hostScrollbarStyleId);r&&r.remove()}}firstUpdated(){"root"!==this.scope&&"both"!==this.scope||this.applyVariables()}updated(e){super.updated(e),(e.has("userTheme")||e.has("mode")||e.has("preference")||e.has("scope"))&&this.pushContext()}willUpdate(e){const r=e.has("preference"),t=e.has("scope"),o=e.has("userTheme");let s=!1;if(r||t){const e=d(this.preference);e!==this.mode&&(this.mode=e,s=!0)}const a=!!this.hasUpdated;if(("host"===this.scope||a)&&(s||t||o)&&this.applyVariables(),r||s||o||t){this.pushContext();const e="host"===this.scope&&a&&(o||r||s||t);this.broadcast&&("root"===this.scope||"both"===this.scope||e)&&this.broadcastTheme()}}setRootThemeAttrs(){const e=document.documentElement;e.toggleAttribute("data-theme-light","light"===this.mode),e.toggleAttribute("data-theme-dark","dark"===this.mode),e.setAttribute("data-theme",this.mode),e.style.colorScheme=this.mode,e.classList.toggle("dark","dark"===this.mode)}broadcastTheme(){const e={mode:this.mode,preference:this.preference};window.dispatchEvent(new CustomEvent("sky-theme",{detail:e})),window.dispatchEvent(new CustomEvent("theme-change-global",{detail:e}))}setPreference(e){try{!this.persist||"root"!==this.scope&&"both"!==this.scope||localStorage.setItem("theme",e)}catch{}this.preference=e,!this.broadcast||"root"!==this.scope&&"both"!==this.scope||this.dispatchEvent(new CustomEvent("theme-change-global",{bubbles:!0,composed:!0}))}togglePreference(){const e=this.preference??h(),r="light"===e?"dark":"dark"===e?"system":"light";return this.setPreference(r),r}setupSystemWatcher(){"undefined"!=typeof window&&window.matchMedia&&(this.media=window.matchMedia("(prefers-color-scheme: dark)"),this.media.addEventListener("change",this.onSystemChange))}ensureGlobalStyle(){if("undefined"==typeof document)return;const e=`\n body {\n font-family: var(--sky-font);\n margin: 0;\n padding: 0;\n background: var(--sky-background-color);\n color: var(--sky-text-primary);\n }\n\n html[data-sky-dialog-open="true"] {\n overflow: hidden !important;\n position: relative;\n height: 100%;\n }\n\n ${w("html, body, *")}\n `.trim();let r=document.getElementById(this.globalStyleId);r?r.textContent=e:(r=document.createElement("style"),r.id=this.globalStyleId,r.textContent=e,document.head.appendChild(r))}applyHostNativeScrollbars(e){if("undefined"!=typeof document){if(this.toggleAttribute("sky-native-scrollbars",e),!e){const e=document.getElementById(this.hostScrollbarStyleId);return void(e&&e.remove())}z(this.hostScrollbarStyleId,w("sky-theme-provider[sky-native-scrollbars], sky-theme-provider[sky-native-scrollbars] *"))}}applyVariables(){const e=function(e,r){const t={},o=(e,r)=>{null!=r&&(t[`--${e}`]=r)};o("sky-text-dark",v(r?"#FFFFFF":"#0B1020")),o("sky-text-light",v(r?"#030712":"#FFFFFF"));const s=e.fontFamily,a=e.fontFamilyMono??"ui-monospace, monospace";o("sky-font",s),o("sky-font-sans",s),o("sky-font-mono",a),o("sky-background-color",v(e.color.background)),o("sky-text-primary",v(e.color.foreground));const i=r?{secondary:82,tertiary:66,quaternary:50,quinary:36}:{secondary:76,tertiary:60,quaternary:44,quinary:30};Object.entries(i).forEach(([e,r])=>{o(`sky-text-${e}`,`color-mix(in oklch, var(--sky-text-primary) ${r}%, var(--sky-background-color))`)}),["primary","secondary","tertiary","quaternary","quinary"].forEach(e=>{o(`sky-text-${e}-hover`,`color-mix(in oklch, var(--sky-text-${e}) 86%, var(--sky-text-dark))`)});const{baseColor:n,baseShades:c,opacities:l}=e.glass,y=e.color.foreground,m=r?{primary:96,secondary:88,tertiary:78}:{primary:96,secondary:90,tertiary:82},h=c?.primary??S(n,m.primary,y),d=c?.secondary??S(n,m.secondary,y),p=c?.tertiary??S(n,m.tertiary,y),k=r?.4:.34,u={primary:g(l.primary,k),secondary:g(l.secondary??l.primary,k),tertiary:g(l.tertiary??l.primary,k),solid:g(l.solid,1)};o("sky-glass-primary",$(h,u.primary)),o("sky-glass-secondary",$(d,u.secondary)),o("sky-glass-tertiary",$(p,u.tertiary)),o("sky-glass-solid",$(n,u.solid));const b=g(e.glassSurface?.top,r?.26:.24),x=g(e.glassSurface?.bottom,r?.08:.06);o("sky-glass-surface",`linear-gradient(\n 180deg,\n ${$(d,b)},\n ${$(h,x)}\n )`),Object.entries(e.overlay.opacities).forEach(([r,t])=>{o(`sky-overlay-${r}`,$(e.overlay.color,t))}),Object.entries(e.glassHover.opacity).forEach(([r,t])=>{o(`sky-hover-${r}`,$(e.glassHover.color,t))}),Object.entries(e.border).forEach(([e,r])=>{o(`sky-border-${e}`,r)}),Object.entries(e.radius).forEach(([e,r])=>{o(`sky-radius-${e}`,r)}),Object.entries(e.blur).forEach(([e,r])=>{o(`sky-blur-${e}`,`blur(${r})`)}),Object.entries(e.brightness).forEach(([e,r])=>{o(`sky-brightness-${e}`,`brightness(${r})`)}),Object.entries(e.saturation).forEach(([e,r])=>{o(`sky-saturation-${e}`,`saturate(${r})`)}),Object.entries(e.boxshadow).forEach(([e,r])=>{o(`sky-box-shadow-${e}`,r)}),o("sky-border-light",e.separator),Object.entries(e.motion?.duration??{}).forEach(([e,r])=>{o(`sky-duration-${e}`,r)}),Object.entries(e.motion?.ease??{}).forEach(([e,r])=>{o(`sky-ease-${e}`,r)}),o("sky-transition-default",["background-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","border-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","box-shadow var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","transform var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","opacity var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))"].join(", ")),o("sky-transition-fast",["background-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","border-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","box-shadow var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","opacity var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))"].join(", ")),Object.entries(e.zIndex??{}).forEach(([e,r])=>{o(`sky-z-${e}`,String(r))}),Object.entries(e.opacity??{}).forEach(([e,r])=>{o(`sky-opacity-${e}`,String(r))});const f=e.scrollbar;o("sky-scrollbar-track",f?.track??"transparent"),o("sky-scrollbar-thumb",f?.thumb??(r?"color-mix(in oklch, var(--sky-text-tertiary) 78%, transparent)":"color-mix(in oklch, var(--sky-text-tertiary) 68%, transparent)")),o("sky-scrollbar-thumb-hover",f?.thumbHover??(r?"color-mix(in oklch, var(--sky-text-secondary) 52%, var(--sky-active-primary))":"color-mix(in oklch, var(--sky-text-secondary) 44%, var(--sky-active-primary))")),o("sky-text-shadow-on-glass",r?"0 1px 2px rgba(0,0,0,0.45)":"0 1px 1px rgba(255,255,255,0.55)");const E=["active","success","warning","danger","info"];E.forEach(r=>{const t=e.color[r];o(`sky-${r}-primary`,t),o(`sky-${r}-secondary`,`color-mix(in oklch, var(--sky-${r}-primary) 82%, var(--sky-background-color))`),o(`sky-${r}-tertiary`,`color-mix(in oklch, var(--sky-${r}-primary) 62%, var(--sky-background-color))`),o(`sky-${r}-quaternary`,`color-mix(in oklch, var(--sky-${r}-primary) 42%, var(--sky-background-color))`),o(`sky-${r}-quinary`,`color-mix(in oklch, var(--sky-${r}-primary) 24%, var(--sky-background-color))`),o(`sky-${r}-primary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 88%, var(--sky-text-dark))`),o(`sky-${r}-secondary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 72%, var(--sky-text-dark))`),o(`sky-${r}-tertiary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 56%, var(--sky-text-dark))`),o(`sky-${r}-quaternary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 40%, var(--sky-text-dark))`),o(`sky-${r}-quinary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 28%, var(--sky-text-dark))`),o(`sky-${r}-g0`,`color-mix(in oklch, var(--sky-${r}-primary) 12%, transparent)`),o(`sky-${r}-g1`,`color-mix(in oklch, var(--sky-${r}-primary) 24%, transparent)`),o(`sky-${r}-g2`,`color-mix(in oklch, var(--sky-${r}-primary) 48%, transparent)`)}),E.forEach(e=>{o(`sky-${e}-primary-hover`,`color-mix(in oklch, var(--sky-${e}-primary) 86%, var(--sky-text-dark))`),o(`sky-${e}-secondary-hover`,`color-mix(in oklch, var(--sky-${e}-secondary) 86%, var(--sky-text-dark))`),o(`sky-${e}-tertiary-hover`,`color-mix(in oklch, var(--sky-${e}-tertiary) 86%, var(--sky-text-dark))`),o(`sky-${e}-quaternary-hover`,`color-mix(in oklch, var(--sky-${e}-quaternary) 86%, var(--sky-text-dark))`),o(`sky-${e}-quinary-hover`,`color-mix(in oklch, var(--sky-${e}-quinary) 86%, var(--sky-text-dark))`)}),E.forEach(e=>{o(`sky-ring-${e}-1`,`0 0 0 1px var(--sky-${e}-primary)`),o(`sky-ring-${e}-2`,`0 0 0 2px var(--sky-${e}-primary)`),o(`sky-ring-${e}-3`,`0 0 0 3px var(--sky-${e}-primary)`),o(`sky-ring-${e}-4`,`0 0 0 4px var(--sky-${e}-primary)`),o(`sky-ring-${e}-5`,`0 0 0 5px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-1`,`inset 0 0 0 1px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-2`,`inset 0 0 0 2px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-3`,`inset 0 0 0 3px var(--sky-${e}-primary)`)}),o("sky-focus-ring-color","var(--sky-active-primary)"),o("sky-focus-ring","0 0 0 3px color-mix(in oklch, var(--sky-focus-ring-color, var(--sky-active-primary)) 42%, transparent)"),o("sky-focus-ring-offset","2px"),o("sky-text-white","oklch(1 0 0)"),o("sky-text-black","oklch(0 0 0)"),o("sky-on-color-fallback-light","var(--sky-text-white)"),o("sky-on-color-fallback-dark","var(--sky-text-black)"),o("sky-on-active-primary","var(--sky-on-color-fallback-light)"),o("sky-on-success-primary","var(--sky-on-color-fallback-light)"),o("sky-on-warning-primary","var(--sky-on-color-fallback-light)"),o("sky-on-danger-primary","var(--sky-on-color-fallback-light)"),o("sky-on-info-primary","var(--sky-on-color-fallback-light)"),Object.entries(e.fontSize??{}).forEach(([e,r])=>{o(`sky-font-size-${e}`,r)}),Object.entries(e.fontWeight??{}).forEach(([e,r])=>{o(`sky-font-weight-${e}`,r)}),Object.entries(e.lineHeight??{}).forEach(([e,r])=>{o(`sky-line-height-${e}`,r)}),Object.entries(e.letterSpacing??{}).forEach(([e,r])=>{o(`sky-letter-spacing-${e}`,r)});const w=(r,t)=>e.fontSize?.[r]??t,F=(r,t)=>e.lineHeight?.[r]??t,z=[{key:"xs",size:"xs",line:"tight"},{key:"sm",size:"sm",line:"snug"},{key:"md",size:"md",line:"normal"},{key:"lg",size:"lg",line:"snug"},{key:"xl",size:"xl",line:"snug"},{key:"2xl",size:"2xl",line:"tight"},{key:"3xl",size:"3xl",line:"tight"},{key:"4xl",size:"4xl",line:"tight"}];for(const{key:e,size:r,line:t}of z){const s=w(r,"1rem"),a=F(t,"1.5");o(`sky-font-${e}`,`${s} / ${a} var(--sky-font-sans)`),o(`sky-font-mono-${e}`,`${s} / ${a} var(--sky-font-mono)`)}Object.entries(e.spacing??{}).forEach(([e,r])=>{o(`sky-space-${e}`,r)});const C={body:{size:"md",weight:"normal",line:"normal"},label:{size:"sm",weight:"medium",line:"snug"},caption:{size:"xs",weight:"normal",line:"tight"},title:{size:"lg",weight:"semibold",line:"snug"},heading:{size:"2xl",weight:"bold",line:"tight"},display:{size:"4xl",weight:"bold",line:"tight"}},j=(r,t)=>e.fontWeight?.[r]??t;for(const[e,r]of Object.entries(C)){const t=w(r.size,"1rem"),s=j(r.weight,"400"),a=F(r.line,"1.5");o(`sky-text-${e}`,`${s} ${t}/${a} var(--sky-font-sans)`)}return t}(b(this.userTheme||{})[this.mode],"dark"===this.mode);if(this.toggleAttribute("data-theme-light","light"===this.mode),this.toggleAttribute("data-theme-dark","dark"===this.mode),"host"===this.scope||"both"===this.scope){const r=F(e,":host");if("adoptedStyleSheets"in Document.prototype&&"replaceSync"in CSSStyleSheet.prototype){if(!this.hostSheet){this.hostSheet=new CSSStyleSheet;const e=this.renderRoot.adoptedStyleSheets??[];this.renderRoot.adoptedStyleSheets=[...e,this.hostSheet]}this.hostSheet.replaceSync(r)}else this.hostStyleEl||(this.hostStyleEl=document.createElement("style"),this.renderRoot.appendChild(this.hostStyleEl)),this.hostStyleEl.textContent=r;this.style.removeProperty("color"),this.style.removeProperty("background"),this.applyHostNativeScrollbars(!0)}else this.applyHostNativeScrollbars(!1);if("root"===this.scope||"both"===this.scope){const r=F(e,":root");z(this.rootVarsStyleId,r),this.setRootThemeAttrs(),this.ensureGlobalStyle(),document.body&&(document.body.style.removeProperty("color"),document.body.style.removeProperty("background"),document.body.style.removeProperty("font-family")),this.broadcastTheme()}}pushContext(){const e=b(this.userTheme??{});this._ctx={mode:this.mode,preference:this.preference,theme:e,setPreference:e=>this.setPreference(e),togglePreference:()=>this.togglePreference()}}render(){return t`<slot></slot>`}};j.styles=e`
|
|
2
2
|
:host {
|
|
3
3
|
display: contents;
|
|
4
4
|
}
|
|
@@ -8,5 +8,5 @@ import{css as e,LitElement as r,html as t}from"lit";import{property as o,state a
|
|
|
8
8
|
color: var(--sky-text-primary);
|
|
9
9
|
background: var(--sky-background-color);
|
|
10
10
|
}
|
|
11
|
-
`,y([o({type:Object})],j.prototype,"userTheme",2),y([o({type:String,reflect:!0})],j.prototype,"scope",2),y([o({type:String,reflect:!0})],j.prototype,"preference",2),y([s()],j.prototype,"mode",2),y([n({context:C})],j.prototype,"_ctx",2),y([o({type:Boolean})],j.prototype,"persist",2),y([o({type:Boolean})],j.prototype,"broadcast",2),j=y([a("sky-theme-provider")],j);export{j as SkyThemeProvider,m as defaultTheme,p as getCurrentTheme,
|
|
11
|
+
`,y([o({type:Object})],j.prototype,"userTheme",2),y([o({type:String,reflect:!0})],j.prototype,"scope",2),y([o({type:String,reflect:!0})],j.prototype,"preference",2),y([s()],j.prototype,"mode",2),y([n({context:C})],j.prototype,"_ctx",2),y([o({type:Boolean})],j.prototype,"persist",2),y([o({type:Boolean})],j.prototype,"broadcast",2),j=y([a("sky-theme-provider")],j);export{j as SkyThemeProvider,m as defaultTheme,p as getCurrentTheme,h as getThemePreference,b as mergeTheme,k as onThemeChange,d as resolveActualTheme,C as themeContext};
|
|
12
12
|
//# sourceMappingURL=sky-theme-provider.js.map
|