@gospore/skeleton 1.0.8 → 1.0.9
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/README.md +4 -0
- package/dist/Skeleton.vue.d.ts +2 -2
- package/dist/{skeleton.cjs.js → skeleton.cjs} +2 -2
- package/dist/skeleton.cjs.map +1 -0
- package/dist/skeleton.css +1 -1
- package/dist/skeleton.es.js +2 -2
- package/dist/skeleton.es.js.map +1 -1
- package/dist/skeleton.umd.js +1 -1
- package/dist/skeleton.umd.js.map +1 -1
- package/package.json +7 -7
- package/dist/skeleton.cjs.js.map +0 -1
package/README.md
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Skeleton renders decorative loading geometry that stands in for content while asynchronous data is loading. Use it directly for custom loading layouts, or use package-owned skeleton compositions such as `AvatarItemSkeleton` and `CommentSkeleton` when an existing component has a matching loading shape.
|
|
4
4
|
|
|
5
|
+
Numeric dimensions are converted to non-negative pixel values. Negative and
|
|
6
|
+
non-finite numeric input is normalized to `0px`; string dimensions such as
|
|
7
|
+
percentages, `rem`, and design-token variables pass through unchanged.
|
|
8
|
+
|
|
5
9
|
## Accessibility
|
|
6
10
|
|
|
7
11
|
Skeleton shapes are decorative and render `aria-hidden="true"`. Put `aria-busy`, `role="status"`, or visible loading copy on the surrounding region when the loading state needs to be announced.
|
package/dist/Skeleton.vue.d.ts
CHANGED
|
@@ -63,12 +63,12 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|
|
63
63
|
default: boolean;
|
|
64
64
|
};
|
|
65
65
|
}>> & Readonly<{}>, {
|
|
66
|
-
circle: boolean;
|
|
67
66
|
width: SkeletonDimension;
|
|
68
|
-
shimmer: boolean;
|
|
69
67
|
height: SkeletonDimension;
|
|
68
|
+
circle: boolean;
|
|
70
69
|
radius: SkeletonDimension;
|
|
71
70
|
elevated: boolean;
|
|
71
|
+
shimmer: boolean;
|
|
72
72
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
73
73
|
declare const _default: typeof __VLS_export;
|
|
74
74
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue");var t=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,e.defineComponent)({name:`Skeleton`,__name:`Skeleton`,props:{width:{type:[String,Number],default:`100%`},height:{type:[String,Number],default:`1em`},radius:{type:[String,Number],default:`var(--skeleton-border-radius)`},circle:{type:Boolean,default:!1},elevated:{type:Boolean,default:!1},shimmer:{type:Boolean,default:!1}},setup(t){let n=t,r=(0,e.computed)(()=>({width:i(n.width),height:i(n.height),borderRadius:n.circle?`50%`:i(n.radius)}));function i(e){return typeof e==`number
|
|
2
|
-
//# sourceMappingURL=skeleton.cjs.
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue");var t=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,e.defineComponent)({name:`Skeleton`,__name:`Skeleton`,props:{width:{type:[String,Number],default:`100%`},height:{type:[String,Number],default:`1em`},radius:{type:[String,Number],default:`var(--skeleton-border-radius)`},circle:{type:Boolean,default:!1},elevated:{type:Boolean,default:!1},shimmer:{type:Boolean,default:!1}},setup(t){let n=t,r=(0,e.computed)(()=>({width:i(n.width),height:i(n.height),borderRadius:n.circle?`50%`:i(n.radius)}));function i(e){return typeof e==`number`?`${Number.isFinite(e)?Math.max(0,e):0}px`:e}return(n,i)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,{class:(0,e.normalizeClass)([`skeleton`,{"skeleton-circle":t.circle,"skeleton-elevated":t.elevated,"skeleton-shimmer":t.shimmer}]),style:(0,e.normalizeStyle)(r.value),"aria-hidden":`true`},null,6))}}),[[`__scopeId`,`data-v-20a2b19f`]]);exports.Skeleton=t;
|
|
2
|
+
//# sourceMappingURL=skeleton.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skeleton.cjs","names":[],"sources":["../src/Skeleton.vue","../src/Skeleton.vue"],"sourcesContent":["<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n if (typeof value !== \"number\") {\n return value;\n }\n\n return `${Number.isFinite(value) ? Math.max(0, value) : 0}px`;\n}\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style scoped lang=\"less\">\n.skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-light);\n\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n position: relative;\n vertical-align: middle;\n background-color: var(--skeleton-background-color-light);\n background-clip: padding-box;\n box-sizing: border-box;\n overflow: hidden;\n}\n.skeleton-circle {\n aspect-ratio: 1;\n}\n.skeleton-elevated {\n box-shadow: var(--skeleton-elevation-light);\n}\n.skeleton-shimmer::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-image: linear-gradient(\n 90deg,\n transparent 0%,\n transparent 30%,\n var(--skeleton-current-shimmer-highlight-color) 50%,\n transparent 70%,\n transparent 100%\n );\n transform: translateX(-100%);\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer::after {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-dark);\n\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\n }\n}\n</style>\n","<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n if (typeof value !== \"number\") {\n return value;\n }\n\n return `${Number.isFinite(value) ? Math.max(0, value) : 0}px`;\n}\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style scoped lang=\"less\">\n.skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-light);\n\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n position: relative;\n vertical-align: middle;\n background-color: var(--skeleton-background-color-light);\n background-clip: padding-box;\n box-sizing: border-box;\n overflow: hidden;\n}\n.skeleton-circle {\n aspect-ratio: 1;\n}\n.skeleton-elevated {\n box-shadow: var(--skeleton-elevation-light);\n}\n.skeleton-shimmer::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-image: linear-gradient(\n 90deg,\n transparent 0%,\n transparent 30%,\n var(--skeleton-current-shimmer-highlight-color) 50%,\n transparent 70%,\n transparent 100%\n );\n transform: translateX(-100%);\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer::after {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-dark);\n\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\n }\n}\n</style>\n"],"mappings":"6eAuBA,IAAM,EAAQ,EAiCR,GAAA,EAAA,EAAA,SAAA,MAAuC,CACzC,MAAO,EAAe,EAAM,KAAK,EACjC,OAAQ,EAAe,EAAM,MAAM,EACnC,aAAc,EAAM,OAAS,MAAQ,EAAe,EAAM,MAAM,CACpE,EAAE,EAEF,SAAS,EAAe,EAA0B,CAK9C,OAJI,OAAO,GAAU,SAId,GAAG,OAAO,SAAS,CAAK,EAAI,KAAK,IAAI,EAAG,CAAK,EAAI,EAAE,IAH/C,CAIf,0DA1DM,OAAA,CARE,OAAA,EAAA,EAAA,eAAA,CAAK,CAAC,WAAU,mBACyB,EAAA,2BAAyC,EAAA,4BAA0C,EAAA,WAK3H,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAK,EACb,cAAY"}
|
package/dist/skeleton.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.theme{--skeleton-border-radius:var(--border-radius-regular);--skeleton-background-color-light:var(--color-skeleton-100-light);--skeleton-background-color-dark:var(--color-skeleton-100-dark);--skeleton-shimmer-highlight-color-light:oklch(100% 0 0/.48);--skeleton-shimmer-highlight-color-dark:oklch(100% 0 0/.12);--skeleton-elevation-light:var(--elevation-raised-light);--skeleton-elevation-dark:var(--elevation-raised-dark);--skeleton-shimmer-duration:1.2s}.skeleton[data-v-
|
|
1
|
+
.theme{--skeleton-border-radius:var(--border-radius-regular);--skeleton-background-color-light:var(--color-skeleton-100-light);--skeleton-background-color-dark:var(--color-skeleton-100-dark);--skeleton-shimmer-highlight-color-light:oklch(100% 0 0/.48);--skeleton-shimmer-highlight-color-dark:oklch(100% 0 0/.12);--skeleton-elevation-light:var(--elevation-raised-light);--skeleton-elevation-dark:var(--elevation-raised-dark);--skeleton-shimmer-duration:1.2s}.skeleton[data-v-20a2b19f]{--skeleton-current-shimmer-highlight-color:var(--skeleton-shimmer-highlight-color-light);vertical-align:middle;background-color:var(--skeleton-background-color-light);box-sizing:border-box;background-clip:padding-box;flex:none;min-width:0;max-width:100%;display:inline-block;position:relative;overflow:hidden}.skeleton-circle[data-v-20a2b19f]{aspect-ratio:1}.skeleton-elevated[data-v-20a2b19f]{box-shadow:var(--skeleton-elevation-light)}.skeleton-shimmer[data-v-20a2b19f]:after{content:"";border-radius:inherit;background-image:linear-gradient(90deg, transparent 0%, transparent 30%, var(--skeleton-current-shimmer-highlight-color) 50%, transparent 70%, transparent 100%);animation:skeleton-shimmer-20a2b19f var(--skeleton-shimmer-duration) ease-in-out infinite;position:absolute;inset:0;transform:translate(-100%)}@keyframes skeleton-shimmer-20a2b19f{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media (prefers-reduced-motion:reduce){.skeleton-shimmer[data-v-20a2b19f]:after{animation:none}}[dark-mode=true] .skeleton[data-v-20a2b19f]{--skeleton-current-shimmer-highlight-color:var(--skeleton-shimmer-highlight-color-dark);background-color:var(--skeleton-background-color-dark)}[dark-mode=true] .skeleton-elevated[data-v-20a2b19f]{box-shadow:var(--skeleton-elevation-dark)}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/skeleton.es.js
CHANGED
|
@@ -41,7 +41,7 @@ var o = /*#__PURE__*/ ((e, t) => {
|
|
|
41
41
|
borderRadius: o.circle ? "50%" : c(o.radius)
|
|
42
42
|
}));
|
|
43
43
|
function c(e) {
|
|
44
|
-
return typeof e == "number" ? e
|
|
44
|
+
return typeof e == "number" ? `${Number.isFinite(e) ? Math.max(0, e) : 0}px` : e;
|
|
45
45
|
}
|
|
46
46
|
return (e, o) => (a(), t("span", {
|
|
47
47
|
class: r(["skeleton", {
|
|
@@ -53,7 +53,7 @@ var o = /*#__PURE__*/ ((e, t) => {
|
|
|
53
53
|
"aria-hidden": "true"
|
|
54
54
|
}, null, 6));
|
|
55
55
|
}
|
|
56
|
-
}), [["__scopeId", "data-v-
|
|
56
|
+
}), [["__scopeId", "data-v-20a2b19f"]]);
|
|
57
57
|
//#endregion
|
|
58
58
|
export { o as Skeleton };
|
|
59
59
|
|
package/dist/skeleton.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.es.js","names":[],"sources":["../src/Skeleton.vue","../src/Skeleton.vue"],"sourcesContent":["<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n
|
|
1
|
+
{"version":3,"file":"skeleton.es.js","names":[],"sources":["../src/Skeleton.vue","../src/Skeleton.vue"],"sourcesContent":["<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n if (typeof value !== \"number\") {\n return value;\n }\n\n return `${Number.isFinite(value) ? Math.max(0, value) : 0}px`;\n}\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style scoped lang=\"less\">\n.skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-light);\n\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n position: relative;\n vertical-align: middle;\n background-color: var(--skeleton-background-color-light);\n background-clip: padding-box;\n box-sizing: border-box;\n overflow: hidden;\n}\n.skeleton-circle {\n aspect-ratio: 1;\n}\n.skeleton-elevated {\n box-shadow: var(--skeleton-elevation-light);\n}\n.skeleton-shimmer::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-image: linear-gradient(\n 90deg,\n transparent 0%,\n transparent 30%,\n var(--skeleton-current-shimmer-highlight-color) 50%,\n transparent 70%,\n transparent 100%\n );\n transform: translateX(-100%);\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer::after {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-dark);\n\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\n }\n}\n</style>\n","<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n if (typeof value !== \"number\") {\n return value;\n }\n\n return `${Number.isFinite(value) ? Math.max(0, value) : 0}px`;\n}\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style scoped lang=\"less\">\n.skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-light);\n\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n position: relative;\n vertical-align: middle;\n background-color: var(--skeleton-background-color-light);\n background-clip: padding-box;\n box-sizing: border-box;\n overflow: hidden;\n}\n.skeleton-circle {\n aspect-ratio: 1;\n}\n.skeleton-elevated {\n box-shadow: var(--skeleton-elevation-light);\n}\n.skeleton-shimmer::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-image: linear-gradient(\n 90deg,\n transparent 0%,\n transparent 30%,\n var(--skeleton-current-shimmer-highlight-color) 50%,\n transparent 70%,\n transparent 100%\n );\n transform: translateX(-100%);\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer::after {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-dark);\n\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,IAAM,IAAQ,GAiCR,IAAQ,SAA+B;GACzC,OAAO,EAAe,EAAM,KAAK;GACjC,QAAQ,EAAe,EAAM,MAAM;GACnC,cAAc,EAAM,SAAS,QAAQ,EAAe,EAAM,MAAM;EACpE,EAAE;EAEF,SAAS,EAAe,GAA0B;GAK9C,OAJI,OAAO,KAAU,WAId,GAAG,OAAO,SAAS,CAAK,IAAI,KAAK,IAAI,GAAG,CAAK,IAAI,EAAE,MAH/C;EAIf;yBAnEI,EASE,QAAA;GARE,OAAK,EAAA,CAAC,YAAU;uBACyB,EAAA;yBAAyC,EAAA;wBAA0C,EAAA;;GAK3H,OAAK,EAAE,EAAA,KAAK;GACb,eAAY"}
|
package/dist/skeleton.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.skeleton={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`}),e.Skeleton=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({name:`Skeleton`,__name:`Skeleton`,props:{width:{type:[String,Number],default:`100%`},height:{type:[String,Number],default:`1em`},radius:{type:[String,Number],default:`var(--skeleton-border-radius)`},circle:{type:Boolean,default:!1},elevated:{type:Boolean,default:!1},shimmer:{type:Boolean,default:!1}},setup(e){let n=e,r=(0,t.computed)(()=>({width:i(n.width),height:i(n.height),borderRadius:n.circle?`50%`:i(n.radius)}));function i(e){return typeof e==`number
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.skeleton={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`}),e.Skeleton=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({name:`Skeleton`,__name:`Skeleton`,props:{width:{type:[String,Number],default:`100%`},height:{type:[String,Number],default:`1em`},radius:{type:[String,Number],default:`var(--skeleton-border-radius)`},circle:{type:Boolean,default:!1},elevated:{type:Boolean,default:!1},shimmer:{type:Boolean,default:!1}},setup(e){let n=e,r=(0,t.computed)(()=>({width:i(n.width),height:i(n.height),borderRadius:n.circle?`50%`:i(n.radius)}));function i(e){return typeof e==`number`?`${Number.isFinite(e)?Math.max(0,e):0}px`:e}return(n,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{class:(0,t.normalizeClass)([`skeleton`,{"skeleton-circle":e.circle,"skeleton-elevated":e.elevated,"skeleton-shimmer":e.shimmer}]),style:(0,t.normalizeStyle)(r.value),"aria-hidden":`true`},null,6))}}),[[`__scopeId`,`data-v-20a2b19f`]])});
|
|
2
2
|
//# sourceMappingURL=skeleton.umd.js.map
|
package/dist/skeleton.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.umd.js","names":[],"sources":["../src/Skeleton.vue","../src/Skeleton.vue"],"sourcesContent":["<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n
|
|
1
|
+
{"version":3,"file":"skeleton.umd.js","names":[],"sources":["../src/Skeleton.vue","../src/Skeleton.vue"],"sourcesContent":["<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n if (typeof value !== \"number\") {\n return value;\n }\n\n return `${Number.isFinite(value) ? Math.max(0, value) : 0}px`;\n}\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style scoped lang=\"less\">\n.skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-light);\n\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n position: relative;\n vertical-align: middle;\n background-color: var(--skeleton-background-color-light);\n background-clip: padding-box;\n box-sizing: border-box;\n overflow: hidden;\n}\n.skeleton-circle {\n aspect-ratio: 1;\n}\n.skeleton-elevated {\n box-shadow: var(--skeleton-elevation-light);\n}\n.skeleton-shimmer::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-image: linear-gradient(\n 90deg,\n transparent 0%,\n transparent 30%,\n var(--skeleton-current-shimmer-highlight-color) 50%,\n transparent 70%,\n transparent 100%\n );\n transform: translateX(-100%);\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer::after {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-dark);\n\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\n }\n}\n</style>\n","<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n if (typeof value !== \"number\") {\n return value;\n }\n\n return `${Number.isFinite(value) ? Math.max(0, value) : 0}px`;\n}\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style scoped lang=\"less\">\n.skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-light);\n\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n position: relative;\n vertical-align: middle;\n background-color: var(--skeleton-background-color-light);\n background-clip: padding-box;\n box-sizing: border-box;\n overflow: hidden;\n}\n.skeleton-circle {\n aspect-ratio: 1;\n}\n.skeleton-elevated {\n box-shadow: var(--skeleton-elevation-light);\n}\n.skeleton-shimmer::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-image: linear-gradient(\n 90deg,\n transparent 0%,\n transparent 30%,\n var(--skeleton-current-shimmer-highlight-color) 50%,\n transparent 70%,\n transparent 100%\n );\n transform: translateX(-100%);\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer::after {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-dark);\n\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\n }\n}\n</style>\n"],"mappings":"usBAuBA,IAAM,EAAQ,EAiCR,GAAA,EAAA,EAAA,SAAA,MAAuC,CACzC,MAAO,EAAe,EAAM,KAAK,EACjC,OAAQ,EAAe,EAAM,MAAM,EACnC,aAAc,EAAM,OAAS,MAAQ,EAAe,EAAM,MAAM,CACpE,EAAE,EAEF,SAAS,EAAe,EAA0B,CAK9C,OAJI,OAAO,GAAU,SAId,GAAG,OAAO,SAAS,CAAK,EAAI,KAAK,IAAI,EAAG,CAAK,EAAI,EAAE,IAH/C,CAIf,0DA1DM,OAAA,CARE,OAAA,EAAA,EAAA,eAAA,CAAK,CAAC,WAAU,mBACyB,EAAA,2BAAyC,EAAA,4BAA0C,EAAA,WAK3H,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAK,EACb,cAAY"}
|
package/package.json
CHANGED
|
@@ -1,25 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gospore/skeleton",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Gospore",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist"
|
|
8
8
|
],
|
|
9
9
|
"type": "module",
|
|
10
|
-
"main": "./dist/skeleton.cjs
|
|
10
|
+
"main": "./dist/skeleton.cjs",
|
|
11
11
|
"module": "./dist/skeleton.es.js",
|
|
12
12
|
"types": "./dist/index.d.ts",
|
|
13
13
|
"exports": {
|
|
14
14
|
".": {
|
|
15
15
|
"import": "./dist/skeleton.es.js",
|
|
16
|
-
"require": "./dist/skeleton.cjs
|
|
16
|
+
"require": "./dist/skeleton.cjs",
|
|
17
17
|
"types": "./dist/index.d.ts"
|
|
18
18
|
},
|
|
19
19
|
"./skeleton.css": "./dist/skeleton.css",
|
|
20
20
|
"./umd": {
|
|
21
|
-
"import": "./dist/skeleton.umd.js"
|
|
22
|
-
"require": "./dist/skeleton.umd.js"
|
|
21
|
+
"import": "./dist/skeleton.umd.js"
|
|
23
22
|
}
|
|
24
23
|
},
|
|
25
24
|
"scripts": {
|
|
@@ -28,10 +27,11 @@
|
|
|
28
27
|
"devDependencies": {
|
|
29
28
|
"@vitejs/plugin-vue": "^6.0.7",
|
|
30
29
|
"unplugin-vue-macros": "^2.14.5",
|
|
31
|
-
"vite": "^8.1.4"
|
|
30
|
+
"vite": "^8.1.4",
|
|
31
|
+
"vue": "^3.5.39"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"vue": "^3.4.20"
|
|
35
35
|
},
|
|
36
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "1eaeb04c9f84e4fe6bff9ec2c54a8f9b8e46374b"
|
|
37
37
|
}
|
package/dist/skeleton.cjs.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.cjs.js","names":[],"sources":["../src/Skeleton.vue","../src/Skeleton.vue"],"sourcesContent":["<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n return typeof value === \"number\" ? value + \"px\" : value;\n}\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style scoped lang=\"less\">\n.skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-light);\n\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n position: relative;\n vertical-align: middle;\n background-color: var(--skeleton-background-color-light);\n background-clip: padding-box;\n box-sizing: border-box;\n overflow: hidden;\n}\n.skeleton-circle {\n aspect-ratio: 1;\n}\n.skeleton-elevated {\n box-shadow: var(--skeleton-elevation-light);\n}\n.skeleton-shimmer::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-image: linear-gradient(\n 90deg,\n transparent 0%,\n transparent 30%,\n var(--skeleton-current-shimmer-highlight-color) 50%,\n transparent 70%,\n transparent 100%\n );\n transform: translateX(-100%);\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer::after {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-dark);\n\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\n }\n}\n</style>\n","<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n return typeof value === \"number\" ? value + \"px\" : value;\n}\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style scoped lang=\"less\">\n.skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-light);\n\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n position: relative;\n vertical-align: middle;\n background-color: var(--skeleton-background-color-light);\n background-clip: padding-box;\n box-sizing: border-box;\n overflow: hidden;\n}\n.skeleton-circle {\n aspect-ratio: 1;\n}\n.skeleton-elevated {\n box-shadow: var(--skeleton-elevation-light);\n}\n.skeleton-shimmer::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-image: linear-gradient(\n 90deg,\n transparent 0%,\n transparent 30%,\n var(--skeleton-current-shimmer-highlight-color) 50%,\n transparent 70%,\n transparent 100%\n );\n transform: translateX(-100%);\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer::after {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-dark);\n\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\n }\n}\n</style>\n"],"mappings":"6eAuBA,IAAM,EAAQ,EAiCR,GAAA,EAAA,EAAA,SAAA,MAAuC,CACzC,MAAO,EAAe,EAAM,KAAK,EACjC,OAAQ,EAAe,EAAM,MAAM,EACnC,aAAc,EAAM,OAAS,MAAQ,EAAe,EAAM,MAAM,CACpE,EAAE,EAEF,SAAS,EAAe,EAA0B,CAC9C,OAAO,OAAO,GAAU,SAAW,EAAQ,KAAO,CACtD,0DAtDM,OAAA,CARE,OAAA,EAAA,EAAA,eAAA,CAAK,CAAC,WAAU,mBACyB,EAAA,2BAAyC,EAAA,4BAA0C,EAAA,WAK3H,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAK,EACb,cAAY"}
|