@sky.ui/core 0.0.35 → 0.0.36

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.
@@ -1 +1 @@
1
- {"version":3,"file":"sky-sheet.js","sources":["../../src/sky-sheet/sky-sheet.ts"],"sourcesContent":["import { LitElement, html, css, type PropertyValues } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { resolveRadius } from \"../helper/utils/size-resolver.js\";\r\n\r\nexport type SkySheetBackground = \"primary\" | \"secondary\" | \"tertiary\" | \"solid\" | \"transparent\";\r\nexport type SkySheetBlurLevel = \"none\" | \"sm\" | \"md\" | \"lg\";\r\nexport type SkySheetShadow = \"none\" | \"sm\" | \"md\" | \"lg\" | \"inset\";\r\nexport type SkySheetBorder = \"none\" | \"sm\" | \"md\" | \"lg\";\r\n\r\n/** Preset tokens or any CSS length (e.g. `1rem`, `16px`). */\r\nexport type SkySheetRadius = string;\r\n\r\nconst SHEET_RADIUS_PRESETS: Record<string, string> = {\r\n none: \"0\",\r\n sm: \"var(--sky-radius-primary)\",\r\n md: \"var(--sky-radius-secondary)\",\r\n lg: \"var(--sky-radius-tertiary)\",\r\n xl: \"var(--sky-radius-full)\",\r\n};\r\n\r\n/** Preset map includes `xl`; arbitrary values pass through like `resolveRadius`. */\r\nexport function resolveSheetRadius(input: string): string {\r\n if (Object.prototype.hasOwnProperty.call(SHEET_RADIUS_PRESETS, input)) {\r\n return SHEET_RADIUS_PRESETS[input];\r\n }\r\n return resolveRadius(input);\r\n}\r\n\r\n/**\r\n * @element sky-sheet\r\n *\r\n * @summary Themed surface container with configurable background, blur, border, and shadow.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/sheet\r\n *\r\n * @slot - Content placed inside the sheet container.\r\n *\r\n * @property {SkySheetBackground} bg - Background style.\r\n * @property {SkySheetBlurLevel} blurLevel - Backdrop blur intensity.\r\n * @property {SkySheetShadow} shadow - Shadow style preset.\r\n * @property {SkySheetBorder} border - Border style preset.\r\n * @property {SkySheetRadius} radius - Preset (`none`, `sm`, `md`, `lg`, `xl`) or CSS length (`1rem`, `16px`).\r\n *\r\n * @Behavior\r\n * - Applies visual styles directly on `:host` for compact composition.\r\n * - Uses theme CSS variables for consistent glass and elevation tokens.\r\n * - Renders slot content without additional wrappers.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-sheet bg=\"solid\" blur-level=\"md\" shadow=\"lg\" border=\"md\" radius=\"lg\">\r\n * <h3>Deployment Summary</h3>\r\n * <p>All regional checks passed. Ready to promote to production.</p>\r\n * </sky-sheet>\r\n * ```\r\n * ```vue\r\n * <template>\r\n * <sky-sheet bg=\"solid\" blur-level=\"md\" shadow=\"lg\" border=\"md\" radius=\"lg\">\r\n * <h3>Deployment Summary</h3>\r\n * <p>All regional checks passed. Ready to promote to production.</p>\r\n * </sky-sheet>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n * return (\r\n * <sky-sheet bg=\"solid\" blur-level=\"md\" shadow=\"lg\" border=\"md\" radius=\"lg\">\r\n * <h3>Deployment Summary</h3>\r\n * <p>All regional checks passed. Ready to promote to production.</p>\r\n * </sky-sheet>\r\n * );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-sheet\")\r\nexport class SkySheet extends LitElement {\r\n\r\n @property({ type: String, reflect: true })\r\n bg: SkySheetBackground = \"primary\";\r\n\r\n @property({ type: String, reflect: true })\r\n blurLevel: SkySheetBlurLevel = \"sm\";\r\n\r\n @property({ type: String, reflect: true })\r\n shadow: SkySheetShadow = \"sm\";\r\n\r\n @property({ type: String, reflect: true })\r\n border: SkySheetBorder = \"sm\";\r\n\r\n @property({ type: String, reflect: true })\r\n radius: SkySheetRadius = \"md\";\r\n\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n this._applyRadiusVar();\r\n }\r\n\r\n private _applyRadiusVar(): void {\r\n this.style.setProperty(\"--sheet-radius\", resolveSheetRadius(this.radius));\r\n }\r\n\r\n protected override willUpdate(changed: PropertyValues): void {\r\n super.willUpdate(changed);\r\n if (changed.size === 0 || changed.has(\"radius\")) {\r\n this._applyRadiusVar();\r\n }\r\n }\r\n\r\n static override styles = css`\r\n :host {\r\n display: block;\r\n box-sizing: border-box;\r\n font-family: var(--sky-font);\r\n width: 100%;\r\n height: 100%;\r\n padding: var(--sky-space-3, 12px);\r\n border-radius: var(--sheet-radius, var(--sky-radius-secondary));\r\n }\r\n\r\n /* background */\r\n :host([bg=\"primary\"]) {\r\n background: var(--sky-glass-primary);\r\n }\r\n :host([bg=\"secondary\"]) {\r\n background: var(--sky-glass-secondary);\r\n }\r\n :host([bg=\"tertiary\"]) {\r\n background: var(--sky-glass-tertiary);\r\n }\r\n :host([bg=\"solid\"]) {\r\n background: var(--sky-glass-solid);\r\n background-image: none;\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n }\r\n :host([bg=\"transparent\"]) {\r\n background: transparent;\r\n background-image: none;\r\n }\r\n\r\n :host([bg=\"primary\"]:not([blurLevel=\"none\"])),\r\n :host([bg=\"secondary\"]:not([blurLevel=\"none\"])),\r\n :host([bg=\"tertiary\"]:not([blurLevel=\"none\"])) {\r\n background-image: var(--sky-glass-surface);\r\n }\r\n\r\n :host([blurLevel=\"none\"]) {\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n }\r\n :host([blurLevel=\"sm\"]) {\r\n backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)\r\n var(--sky-saturation-primary);\r\n -webkit-backdrop-filter: var(--sky-blur-primary)\r\n var(--sky-brightness-primary) var(--sky-saturation-primary);\r\n }\r\n :host([blurLevel=\"md\"]) {\r\n backdrop-filter: var(--sky-blur-secondary) var(--sky-brightness-secondary)\r\n var(--sky-saturation-secondary);\r\n -webkit-backdrop-filter: var(--sky-blur-secondary)\r\n var(--sky-brightness-secondary) var(--sky-saturation-secondary);\r\n }\r\n :host([blurLevel=\"lg\"]) {\r\n backdrop-filter: var(--sky-blur-tertiary) var(--sky-brightness-tertiary)\r\n var(--sky-saturation-tertiary);\r\n -webkit-backdrop-filter: var(--sky-blur-tertiary)\r\n var(--sky-brightness-tertiary) var(--sky-saturation-tertiary);\r\n }\r\n\r\n /* shadow */\r\n :host([shadow=\"none\"]) {\r\n box-shadow: none;\r\n }\r\n :host([shadow=\"sm\"]) {\r\n box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-primary);\r\n }\r\n :host([shadow=\"md\"]) {\r\n box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-secondary);\r\n }\r\n :host([shadow=\"lg\"]) {\r\n box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-tertiary);\r\n }\r\n :host([shadow=\"inset\"]) {\r\n box-shadow: var(--sky-box-shadow-inset);\r\n }\r\n\r\n /* border */\r\n :host([border=\"none\"]) {\r\n border: none;\r\n }\r\n :host([border=\"sm\"]) {\r\n border: var(--sky-border-primary);\r\n }\r\n :host([border=\"md\"]) {\r\n border: var(--sky-border-secondary);\r\n }\r\n :host([border=\"lg\"]) {\r\n border: var(--sky-border-tertiary);\r\n }\r\n `;\r\n\r\n override render() {\r\n return html`<slot></slot>`;\r\n }\r\n}\r\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","connectedCallback","_applyRadiusVar","style","setProperty","willUpdate","changed","size","has","render","html","styles","css","__decorateClass","property","type","String","reflect","customElement"],"mappings":"qXAYA,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,CAoDO,IAAMM,EAAN,cAAuBC,EAAvB,WAAAC,GAAAC,SAAAC,WAGLC,KAAAC,GAAyB,UAGzBD,KAAAE,UAA+B,KAG/BF,KAAAG,OAAyB,KAGzBH,KAAAI,OAAyB,KAGzBJ,KAAAK,OAAyB,IAAA,CAEhB,iBAAAC,GACPR,MAAMQ,oBACNN,KAAKO,iBACP,CAEQ,eAAAA,GACNP,KAAKQ,MAAMC,YAAY,iBAAkBrB,EAAmBY,KAAKK,QACnE,CAEmB,UAAAK,CAAWC,GAC5Bb,MAAMY,WAAWC,IACI,IAAjBA,EAAQC,MAAcD,EAAQE,IAAI,YACpCb,KAAKO,iBAET,CA+FS,MAAAO,GACP,OAAOC,CAAA,eACT,GAhIWpB,EAiCKqB,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA9BzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAFxB3B,EAGXJ,UAAA,KAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KALxB3B,EAMXJ,UAAA,YAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KARxB3B,EASXJ,UAAA,SAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAXxB3B,EAYXJ,UAAA,SAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAdxB3B,EAeXJ,UAAA,SAAA,GAfWI,EAANuB,EAAA,CADNK,EAAc,cACF5B"}
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\";\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://library.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 *\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 protected override willUpdate(changed: PropertyValues): void {\n super.willUpdate(changed);\n if (changed.size === 0 || changed.has(\"radius\")) {\n this._applyRadiusVar();\n }\n }\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","connectedCallback","_applyRadiusVar","style","setProperty","willUpdate","changed","size","has","render","html","styles","css","__decorateClass","property","type","String","reflect","customElement"],"mappings":"qXAYA,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,CAoDO,IAAMM,EAAN,cAAuBC,EAAvB,WAAAC,GAAAC,SAAAC,WAGLC,KAAAC,GAAyB,UAGzBD,KAAAE,UAA+B,KAG/BF,KAAAG,OAAyB,KAGzBH,KAAAI,OAAyB,KAGzBJ,KAAAK,OAAyB,IAAA,CAEhB,iBAAAC,GACPR,MAAMQ,oBACNN,KAAKO,iBACP,CAEQ,eAAAA,GACNP,KAAKQ,MAAMC,YAAY,iBAAkBrB,EAAmBY,KAAKK,QACnE,CAEmB,UAAAK,CAAWC,GAC5Bb,MAAMY,WAAWC,IACI,IAAjBA,EAAQC,MAAcD,EAAQE,IAAI,YACpCb,KAAKO,iBAET,CA+FS,MAAAO,GACP,OAAOC,CAAA,eACT,GAhIWpB,EAiCKqB,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA9BzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAFxB3B,EAGXJ,UAAA,KAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KALxB3B,EAMXJ,UAAA,YAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KARxB3B,EASXJ,UAAA,SAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAXxB3B,EAYXJ,UAAA,SAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAdxB3B,EAeXJ,UAAA,SAAA,GAfWI,EAANuB,EAAA,CADNK,EAAc,cACF5B"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sky.ui/core",
3
- "version": "0.0.35",
3
+ "version": "0.0.36",
4
4
  "description": "Sky UI web components built with Lit — 70+ components, bundler plugins, and custom elements.",
5
5
  "keywords": [
6
6
  "sky-ui",