@kyndryl-design-system/shidoka-applications 2.66.1 → 2.66.2

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,4 +1,4 @@
1
- import{_ as e,a as t,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{i as s,t as r,r as o,n as l}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{e as d,x as h}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as c}from"../../../vendor/lit-element-DxLLCKb1.js";var g=s`*,
1
+ import{_ as e,a as t,b as i,c as a,d as s}from"../../../vendor/tslib-Ac8XvvSX.js";import{i as n,t as r,r as o,n as l}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{e as d,x as h}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as c}from"../../../vendor/lit-element-DxLLCKb1.js";var k=n`*,
2
2
  *::before,
3
3
  *::after {
4
4
  box-sizing: border-box;
@@ -13,8 +13,7 @@ import{_ as e,a as t,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
13
13
  --skeleton-base-height: 16px;
14
14
  --skeleton-border-radius: 4px;
15
15
  --skeleton-background: var(--kd-color-background-loader-skeleton-default);
16
- --skeleton-shimmer-duration: 1.5s;
17
- /* default shimmer color */
16
+ --skeleton-shimmer-duration: 0.6s;
18
17
  --_shimmer-color: var(--kd-color-background-loader-skeleton-tertiary);
19
18
  display: block;
20
19
  width: 100%;
@@ -40,6 +39,7 @@ import{_ as e,a as t,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
40
39
  overflow: hidden;
41
40
  background: var(--skeleton-background);
42
41
  border-radius: var(--skeleton-border-radius);
42
+ isolation: isolate;
43
43
  }
44
44
  .skeleton::after {
45
45
  content: "";
@@ -51,7 +51,7 @@ import{_ as e,a as t,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
51
51
  background-repeat: no-repeat;
52
52
  background-size: 200% 100%;
53
53
  background-position: -100% 0;
54
- animation: shimmer var(--skeleton-shimmer-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
54
+ animation: shimmer var(--skeleton-shimmer-duration) linear infinite;
55
55
  }
56
56
  .skeleton.rectangle {
57
57
  border-radius: var(--skeleton-border-radius);
@@ -73,33 +73,43 @@ import{_ as e,a as t,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
73
73
  height: 128px;
74
74
  }
75
75
 
76
- /* AI variant */
77
76
  .skeleton.ai-connected {
78
77
  background: linear-gradient(90deg, var(--kd-color-background-gradients-ai-loader-start-gradient) 0%, var(--kd-color-background-gradients-ai-loader-end-gradient) 100%);
79
78
  }
80
79
 
81
80
  .skeleton.ai-connected::after {
82
- --_ai-band: color-mix(in oklab, gray 55%, transparent);
81
+ background: #fff;
82
+ background-image: none;
83
83
  mix-blend-mode: screen;
84
- background-image: linear-gradient(90deg, transparent 0%, var(--_ai-band) 15%, transparent 30%);
85
- background-repeat: no-repeat;
84
+ opacity: 0.18;
85
+ -webkit-mask-image: linear-gradient(90deg, transparent 0 15%, black 15% 30%, transparent 30% 45%);
86
+ mask-image: linear-gradient(90deg, transparent 0 15%, black 15% 30%, transparent 30% 45%);
87
+ -webkit-mask-size: 200% 100%;
88
+ mask-size: 200% 100%;
89
+ -webkit-mask-position: -100% 0;
90
+ mask-position: -100% 0;
86
91
  background-size: 200% 100%;
87
92
  background-position: -100% 0;
88
- animation: shimmer var(--skeleton-shimmer-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
93
+ will-change: -webkit-mask-position, mask-position, background-position;
94
+ animation: shimmer var(--skeleton-shimmer-duration) linear infinite;
89
95
  }
90
96
 
91
97
  @keyframes shimmer {
92
98
  0% {
93
99
  background-position: -100% 0;
100
+ -webkit-mask-position: -100% 0;
101
+ mask-position: -100% 0;
94
102
  }
95
103
  100% {
96
104
  background-position: 100% 0;
105
+ -webkit-mask-position: 100% 0;
106
+ mask-position: 100% 0;
97
107
  }
98
- }`;let k=(()=>{var s,k,m,p,u,b,v;let f,w,y,x,z,S,j,C,M,W=[r("kyn-skeleton")],$=[],_=c,B=[],O=[],A=[],I=[],N=[],P=[],q=[],D=[],E=[],F=[],G=[],H=[],J=[],K=[];return w=class extends _{get shape(){return a(this,s,"f")}set shape(e){n(this,s,e,"f")}get size(){return a(this,k,"f")}set size(e){n(this,k,e,"f")}get width(){return a(this,m,"f")}set width(e){n(this,m,e,"f")}get height(){return a(this,p,"f")}set height(e){n(this,p,e,"f")}get lines(){return a(this,u,"f")}set lines(e){n(this,u,e,"f")}get inline(){return a(this,b,"f")}set inline(e){n(this,b,e,"f")}get aiConnected(){return a(this,v,"f")}set aiConnected(e){n(this,v,e,"f")}render(){const e={skeleton:!0,[this.shape]:!0,[`size-${this.size}`]:Boolean(this.size),"multi-line":this.lines>1,inline:this.inline,"ai-connected":this.aiConnected},t={...this.width&&{width:this.width},...this.height&&{height:this.height}},i=Array.from({length:this.lines},(()=>h`
108
+ }`;let m=(()=>{var n,m,g,p,u,b,v;let f,w,y,x,z,S,j,C,M,W=[r("kyn-skeleton")],$=[],B=c,O=[],_=[],A=[],N=[],P=[],q=[],D=[],E=[],F=[],G=[],H=[],I=[],J=[],K=[];return w=class extends B{get shape(){return a(this,n,"f")}set shape(e){s(this,n,e,"f")}get size(){return a(this,m,"f")}set size(e){s(this,m,e,"f")}get width(){return a(this,g,"f")}set width(e){s(this,g,e,"f")}get height(){return a(this,p,"f")}set height(e){s(this,p,e,"f")}get lines(){return a(this,u,"f")}set lines(e){s(this,u,e,"f")}get inline(){return a(this,b,"f")}set inline(e){s(this,b,e,"f")}get aiConnected(){return a(this,v,"f")}set aiConnected(e){s(this,v,e,"f")}render(){const e={skeleton:!0,[this.shape]:!0,[`size-${this.size}`]:Boolean(this.size),"multi-line":this.lines>1,inline:this.inline,"ai-connected":this.aiConnected},t={...this.width&&{width:this.width},...this.height&&{height:this.height}},i=Array.from({length:this.lines},(()=>h`
99
109
  <div
100
110
  class=${d(e)}
101
111
  style=${Object.entries(t).map((([e,t])=>`${e}: ${t}`)).join(";")}
102
112
  aria-hidden="true"
103
113
  ></div>
104
- `));return h`<div class="container">${i}</div>`}constructor(){super(...arguments),s.set(this,i(this,B,"rectangle")),k.set(this,(i(this,O),i(this,A,void 0))),m.set(this,(i(this,I),i(this,N,void 0))),p.set(this,(i(this,P),i(this,q,void 0))),u.set(this,(i(this,D),i(this,E,1))),b.set(this,(i(this,F),i(this,G,!1))),v.set(this,(i(this,H),i(this,J,!1))),i(this,K)}},s=new WeakMap,k=new WeakMap,m=new WeakMap,p=new WeakMap,u=new WeakMap,b=new WeakMap,v=new WeakMap,e(w,"Skeleton"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=_[Symbol.metadata])&&void 0!==e?e:null):void 0;y=[l({type:String,reflect:!0})],x=[l({type:String})],z=[l({type:String})],S=[l({type:String})],j=[l({type:Number})],C=[l({type:Boolean,reflect:!0})],M=[l({type:Boolean,reflect:!0})],t(w,null,y,{kind:"accessor",name:"shape",static:!1,private:!1,access:{has:e=>"shape"in e,get:e=>e.shape,set:(e,t)=>{e.shape=t}},metadata:i},B,O),t(w,null,x,{kind:"accessor",name:"size",static:!1,private:!1,access:{has:e=>"size"in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:i},A,I),t(w,null,z,{kind:"accessor",name:"width",static:!1,private:!1,access:{has:e=>"width"in e,get:e=>e.width,set:(e,t)=>{e.width=t}},metadata:i},N,P),t(w,null,S,{kind:"accessor",name:"height",static:!1,private:!1,access:{has:e=>"height"in e,get:e=>e.height,set:(e,t)=>{e.height=t}},metadata:i},q,D),t(w,null,j,{kind:"accessor",name:"lines",static:!1,private:!1,access:{has:e=>"lines"in e,get:e=>e.lines,set:(e,t)=>{e.lines=t}},metadata:i},E,F),t(w,null,C,{kind:"accessor",name:"inline",static:!1,private:!1,access:{has:e=>"inline"in e,get:e=>e.inline,set:(e,t)=>{e.inline=t}},metadata:i},G,H),t(w,null,M,{kind:"accessor",name:"aiConnected",static:!1,private:!1,access:{has:e=>"aiConnected"in e,get:e=>e.aiConnected,set:(e,t)=>{e.aiConnected=t}},metadata:i},J,K),t(null,f={value:w},W,{kind:"class",name:w.name,metadata:i},null,$),w=f.value,i&&Object.defineProperty(w,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),w.styles=o(g),i(w,$),w})();export{k as Skeleton};
114
+ `));return h`<div class="container">${i}</div>`}constructor(){super(...arguments),n.set(this,i(this,O,"rectangle")),m.set(this,(i(this,_),i(this,A,void 0))),g.set(this,(i(this,N),i(this,P,void 0))),p.set(this,(i(this,q),i(this,D,void 0))),u.set(this,(i(this,E),i(this,F,1))),b.set(this,(i(this,G),i(this,H,!1))),v.set(this,(i(this,I),i(this,J,!1))),i(this,K)}},n=new WeakMap,m=new WeakMap,g=new WeakMap,p=new WeakMap,u=new WeakMap,b=new WeakMap,v=new WeakMap,e(w,"Skeleton"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=B[Symbol.metadata])&&void 0!==e?e:null):void 0;y=[l({type:String,reflect:!0})],x=[l({type:String})],z=[l({type:String})],S=[l({type:String})],j=[l({type:Number})],C=[l({type:Boolean,reflect:!0})],M=[l({type:Boolean,reflect:!0})],t(w,null,y,{kind:"accessor",name:"shape",static:!1,private:!1,access:{has:e=>"shape"in e,get:e=>e.shape,set:(e,t)=>{e.shape=t}},metadata:i},O,_),t(w,null,x,{kind:"accessor",name:"size",static:!1,private:!1,access:{has:e=>"size"in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:i},A,N),t(w,null,z,{kind:"accessor",name:"width",static:!1,private:!1,access:{has:e=>"width"in e,get:e=>e.width,set:(e,t)=>{e.width=t}},metadata:i},P,q),t(w,null,S,{kind:"accessor",name:"height",static:!1,private:!1,access:{has:e=>"height"in e,get:e=>e.height,set:(e,t)=>{e.height=t}},metadata:i},D,E),t(w,null,j,{kind:"accessor",name:"lines",static:!1,private:!1,access:{has:e=>"lines"in e,get:e=>e.lines,set:(e,t)=>{e.lines=t}},metadata:i},F,G),t(w,null,C,{kind:"accessor",name:"inline",static:!1,private:!1,access:{has:e=>"inline"in e,get:e=>e.inline,set:(e,t)=>{e.inline=t}},metadata:i},H,I),t(w,null,M,{kind:"accessor",name:"aiConnected",static:!1,private:!1,access:{has:e=>"aiConnected"in e,get:e=>e.aiConnected,set:(e,t)=>{e.aiConnected=t}},metadata:i},J,K),t(null,f={value:w},W,{kind:"class",name:w.name,metadata:i},null,$),w=f.value,i&&Object.defineProperty(w,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),w.styles=o(k),i(w,$),w})();export{m as Skeleton};
105
115
  //# sourceMappingURL=skeleton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"skeleton.js","sources":["../../../../src/components/reusable/loaders/skeleton.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport skeletonStyles from './skeleton.scss?inline';\n\n@customElement('kyn-skeleton')\nexport class Skeleton extends LitElement {\n static override styles = unsafeCSS(skeletonStyles);\n\n /**\n * Defines the shape of the skeleton element.\n */\n @property({ type: String, reflect: true })\n accessor shape: 'rectangle' | 'circle' = 'rectangle';\n\n /**\n * Optional: Predefined size (small, medium, large).\n */\n @property({ type: String })\n accessor size: 'small' | 'medium' | 'large' | undefined;\n\n /**\n * Optional: Custom width (overrides size if provided).\n */\n @property({ type: String })\n accessor width: string | undefined;\n\n /**\n * Optional: Custom height (overrides size if provided).\n */\n @property({ type: String })\n accessor height: string | undefined;\n\n /**\n * Sets the number of skeleton lines to display.\n */\n @property({ type: Number })\n accessor lines = 1;\n\n /**\n * Sets whether to display inline or block.\n */\n @property({ type: Boolean, reflect: true })\n accessor inline = false;\n\n /**\n * Set to `true` for AI theme.\n * This adds the `.ai-connected` class and reflects the host attribute,\n * allowing shidoka-scoped CSS variables to resolve.\n */\n @property({ type: Boolean, reflect: true })\n accessor aiConnected = false;\n\n override render() {\n const classes = {\n skeleton: true,\n [this.shape]: true,\n [`size-${this.size}`]: Boolean(this.size),\n 'multi-line': this.lines > 1,\n inline: this.inline,\n 'ai-connected': this.aiConnected,\n };\n\n const styles = {\n ...(this.width && { width: this.width }),\n ...(this.height && { height: this.height }),\n };\n\n const skeletonLines = Array.from(\n { length: this.lines },\n () => html`\n <div\n class=${classMap(classes)}\n style=${Object.entries(styles)\n .map(([key, value]) => `${key}: ${value}`)\n .join(';')}\n aria-hidden=\"true\"\n ></div>\n `\n );\n\n return html`<div class=\"container\">${skeletonLines}</div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-skeleton': Skeleton;\n }\n}\n"],"names":["Skeleton","customElement","LitElement","_classThis","_classSuper","shape","__classPrivateFieldGet","this","_Skeleton_shape_accessor_storage","value","__classPrivateFieldSet","size","_Skeleton_size_accessor_storage","width","_Skeleton_width_accessor_storage","height","_Skeleton_height_accessor_storage","lines","_Skeleton_lines_accessor_storage","inline","_Skeleton_inline_accessor_storage","aiConnected","_Skeleton_aiConnected_accessor_storage","render","classes","skeleton","Boolean","styles","skeletonLines","Array","from","length","html","classMap","Object","entries","map","key","join","set","__runInitializers","_shape_initializers","_shape_extraInitializers","_size_initializers","_size_extraInitializers","_width_initializers","_width_extraInitializers","_height_initializers","_height_extraInitializers","_lines_initializers","_lines_extraInitializers","_inline_initializers","_inline_extraInitializers","_aiConnected_initializers","property","type","String","reflect","_size_decorators","_width_decorators","_height_decorators","_lines_decorators","Number","__esDecorate","_shape_decorators","kind","name","static","private","access","has","obj","get","metadata","_metadata","_inline_decorators","_aiConnected_decorators","_aiConnected_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","unsafeCSS","skeletonStyles"],"mappings":"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"}
1
+ {"version":3,"file":"skeleton.js","sources":["../../../../src/components/reusable/loaders/skeleton.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport skeletonStyles from './skeleton.scss?inline';\n\n@customElement('kyn-skeleton')\nexport class Skeleton extends LitElement {\n static override styles = unsafeCSS(skeletonStyles);\n\n /**\n * Defines the shape of the skeleton element.\n */\n @property({ type: String, reflect: true })\n accessor shape: 'rectangle' | 'circle' = 'rectangle';\n\n /**\n * Optional: Predefined size (small, medium, large).\n */\n @property({ type: String })\n accessor size: 'small' | 'medium' | 'large' | undefined;\n\n /**\n * Optional: Custom width (overrides size if provided).\n */\n @property({ type: String })\n accessor width: string | undefined;\n\n /**\n * Optional: Custom height (overrides size if provided).\n */\n @property({ type: String })\n accessor height: string | undefined;\n\n /**\n * Sets the number of skeleton lines to display.\n */\n @property({ type: Number })\n accessor lines = 1;\n\n /**\n * Sets whether to display inline or block.\n */\n @property({ type: Boolean, reflect: true })\n accessor inline = false;\n\n /**\n * Set to `true` for AI theme.\n * This adds the `.ai-connected` class and reflects the host attribute,\n * allowing shidoka-scoped CSS variables to resolve.\n */\n @property({ type: Boolean, reflect: true })\n accessor aiConnected = false;\n\n override render() {\n const classes = {\n skeleton: true,\n [this.shape]: true,\n [`size-${this.size}`]: Boolean(this.size),\n 'multi-line': this.lines > 1,\n inline: this.inline,\n 'ai-connected': this.aiConnected,\n };\n\n const styles = {\n ...(this.width && { width: this.width }),\n ...(this.height && { height: this.height }),\n };\n\n const skeletonLines = Array.from(\n { length: this.lines },\n () => html`\n <div\n class=${classMap(classes)}\n style=${Object.entries(styles)\n .map(([key, value]) => `${key}: ${value}`)\n .join(';')}\n aria-hidden=\"true\"\n ></div>\n `\n );\n\n return html`<div class=\"container\">${skeletonLines}</div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-skeleton': Skeleton;\n }\n}\n"],"names":["Skeleton","customElement","LitElement","_classThis","_classSuper","shape","__classPrivateFieldGet","this","_Skeleton_shape_accessor_storage","value","__classPrivateFieldSet","size","_Skeleton_size_accessor_storage","width","_Skeleton_width_accessor_storage","height","_Skeleton_height_accessor_storage","lines","_Skeleton_lines_accessor_storage","inline","_Skeleton_inline_accessor_storage","aiConnected","_Skeleton_aiConnected_accessor_storage","render","classes","skeleton","Boolean","styles","skeletonLines","Array","from","length","html","classMap","Object","entries","map","key","join","set","__runInitializers","_shape_initializers","_shape_extraInitializers","_size_initializers","_size_extraInitializers","_width_initializers","_width_extraInitializers","_height_initializers","_height_extraInitializers","_lines_initializers","_lines_extraInitializers","_inline_initializers","_inline_extraInitializers","_aiConnected_initializers","property","type","String","reflect","_size_decorators","_width_decorators","_height_decorators","_lines_decorators","Number","__esDecorate","_shape_decorators","kind","name","static","private","access","has","obj","get","metadata","_metadata","_inline_decorators","_aiConnected_decorators","_aiConnected_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","unsafeCSS","skeletonStyles"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kyndryl-design-system/shidoka-applications",
3
- "version": "2.66.1",
3
+ "version": "2.66.2",
4
4
  "description": "Shidoka Web Components for Applications",
5
5
  "license": "MIT",
6
6
  "main": "index.js",