@sondor-technology/sondor-components 1.0.1-develop.3 → 1.0.1-develop.5

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.
Files changed (11) hide show
  1. package/dist/components/skeleton/skeleton.d.ts +2 -3
  2. package/dist/components/skeleton/skeleton.d.ts.map +1 -1
  3. package/dist/components/skeleton/skeleton.js +89 -18
  4. package/dist/components/vertical-nav/vertical-nav-group.d.ts +5 -0
  5. package/dist/components/vertical-nav/vertical-nav-group.d.ts.map +1 -1
  6. package/dist/components/vertical-nav/vertical-nav-item.d.ts +5 -0
  7. package/dist/components/vertical-nav/vertical-nav-item.d.ts.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/skeleton/skeleton.ts +87 -20
  10. package/src/components/vertical-nav/vertical-nav-group.ts +6 -0
  11. package/src/components/vertical-nav/vertical-nav-item.ts +6 -0
package/dist/components/skeleton/skeleton.d.ts CHANGED
@@ -1,11 +1,10 @@
1
1
  import { LitElement } from 'lit';
2
2
  export declare class StSkeleton extends LitElement {
3
- /** Variant shape: 'text' | 'circular' | 'rectangular' */
4
3
  variant: 'text' | 'circular' | 'rectangular';
5
- /** Custom width override (e.g., '200px', '50%') */
4
+ animation: 'shimmer' | 'pulse' | 'none';
6
5
  width: string;
7
- /** Custom height override (e.g., '40px', '1rem') */
8
6
  height: string;
7
+ updated(changedProperties: Map<string | number | symbol, unknown>): void;
9
8
  static styles: import("lit").CSSResult[];
10
9
  render(): import("lit-html").TemplateResult<1>;
11
10
  }
package/dist/components/skeleton/skeleton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACxC,yDAAyD;IAC7B,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,aAAa,CAAU;IAElF,mDAAmD;IACvB,KAAK,SAAM;IAEvC,oDAAoD;IACxB,MAAM,SAAM;IAExC,MAAM,CAAC,MAAM,4BAqCX;IAEF,MAAM,yCAML;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
1
+ {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACG,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,aAAa,CAAU;IACtD,SAAS,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAa;IACnE,KAAK,SAAM;IACX,MAAM,SAAM;IAGxC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,QAkBhE;IAED,MAAM,CAAC,MAAM,4BAyFX;IAEF,MAAM,yCAIL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
package/dist/components/skeleton/skeleton.js CHANGED
@@ -10,19 +10,35 @@ import { resetStyles } from '../../styles/reset.js';
10
10
  let StSkeleton = class StSkeleton extends LitElement {
11
11
  constructor() {
12
12
  super(...arguments);
13
- /** Variant shape: 'text' | 'circular' | 'rectangular' */
14
13
  this.variant = 'text';
15
- /** Custom width override (e.g., '200px', '50%') */
14
+ this.animation = 'shimmer';
16
15
  this.width = '';
17
- /** Custom height override (e.g., '40px', '1rem') */
18
16
  this.height = '';
19
17
  }
18
+ // Apply properties directly to the :host as CSS variables when they change
19
+ updated(changedProperties) {
20
+ super.updated(changedProperties);
21
+ if (changedProperties.has('width')) {
22
+ if (this.width) {
23
+ this.style.setProperty('--st-skeleton-width', this.width);
24
+ }
25
+ else {
26
+ this.style.removeProperty('--st-skeleton-width');
27
+ }
28
+ }
29
+ if (changedProperties.has('height')) {
30
+ if (this.height) {
31
+ this.style.setProperty('--st-skeleton-height', this.height);
32
+ }
33
+ else {
34
+ this.style.removeProperty('--st-skeleton-height');
35
+ }
36
+ }
37
+ }
20
38
  render() {
21
- const style = `
22
- ${this.width ? `--st-skeleton-width: ${this.width};` : ''}
23
- ${this.height ? `--st-skeleton-height: ${this.height};` : ''}
39
+ return html `
40
+ <div class="skeleton" aria-hidden="true" part="base"></div>
24
41
  `;
25
- return html `<div class="skeleton" style=${style}></div>`;
26
42
  }
27
43
  };
28
44
  StSkeleton.styles = [
@@ -30,12 +46,38 @@ StSkeleton.styles = [
30
46
  css `
31
47
  :host {
32
48
  display: block;
33
- width: 100%;
49
+
50
+ /* Define base sizing variables that can be overridden by props */
51
+ --_width: var(--st-skeleton-width, 100%);
52
+ --_height: var(--st-skeleton-height, 1em);
53
+
54
+ /*
55
+ CRITICAL FIX: Apply sizing directly to the host.
56
+ This allows external classes and styles (like margin: auto) to work perfectly.
57
+ */
58
+ width: var(--_width);
59
+ height: var(--_height);
60
+
61
+ /* Expose radius as a token for external theme overrides */
62
+ --st-skeleton-radius: var(--st-radius-sm, 0.25rem);
63
+ }
64
+
65
+ /* Shape Variants adjust the host's sizing variables */
66
+ :host([variant="circular"]) {
67
+ --_width: var(--st-skeleton-width, 2.5rem);
68
+ --_height: var(--st-skeleton-height, 2.5rem);
69
+ }
70
+
71
+ :host([variant="rectangular"]) {
72
+ --_height: var(--st-skeleton-height, 8rem);
34
73
  }
35
74
 
36
75
  .skeleton {
37
- width: var(--st-skeleton-width, 100%);
38
- height: var(--st-skeleton-height, 1em);
76
+ /* The inner element simply fills the host */
77
+ display: block;
78
+ width: 100%;
79
+ height: 100%;
80
+
39
81
  background: linear-gradient(
40
82
  90deg,
41
83
  var(--st-color-surface-muted, #f1f5f9) 25%,
@@ -43,29 +85,58 @@ StSkeleton.styles = [
43
85
  var(--st-color-surface-muted, #f1f5f9) 63%
44
86
  );
45
87
  background-size: 400% 100%;
46
- animation: st-shimmer 1.4s ease infinite;
47
- border-radius: var(--st-radius-sm, 0.25rem);
88
+ border-radius: var(--st-skeleton-radius);
89
+
90
+ /* Prevent accidental selection */
91
+ user-select: none;
92
+ pointer-events: none;
48
93
  }
49
94
 
50
95
  :host([variant="circular"]) .skeleton {
51
96
  border-radius: 50%;
52
- height: var(--st-skeleton-height, 2.5rem);
53
- width: var(--st-skeleton-width, 2.5rem);
54
97
  }
55
98
 
56
- :host([variant="rectangular"]) .skeleton {
57
- height: var(--st-skeleton-height, 8rem);
99
+ /* Animations */
100
+ :host([animation="shimmer"]) .skeleton {
101
+ animation: st-shimmer 1.4s ease infinite;
102
+ }
103
+
104
+ :host([animation="pulse"]) .skeleton {
105
+ background: var(--st-color-surface-muted, #f1f5f9);
106
+ animation: st-pulse 1.5s ease-in-out infinite;
107
+ }
108
+
109
+ :host([animation="none"]) .skeleton {
110
+ background: var(--st-color-surface-muted, #f1f5f9);
111
+ animation: none;
112
+ }
113
+
114
+ /* Accessibility: Respect OS reduced motion settings */
115
+ @media (prefers-reduced-motion: reduce) {
116
+ .skeleton {
117
+ animation: none !important;
118
+ background: var(--st-color-surface-muted, #f1f5f9) !important;
119
+ }
58
120
  }
59
121
 
60
122
  @keyframes st-shimmer {
61
123
  0% { background-position: 100% 0; }
62
- 100% { background-position: 0 0; }
124
+ 100% { background-position: -100% 0; }
125
+ }
126
+
127
+ @keyframes st-pulse {
128
+ 0% { opacity: 1; }
129
+ 50% { opacity: 0.4; }
130
+ 100% { opacity: 1; }
63
131
  }
64
132
  `
65
133
  ];
66
134
  __decorate([
67
- property({ type: String })
135
+ property({ type: String, reflect: true })
68
136
  ], StSkeleton.prototype, "variant", void 0);
137
+ __decorate([
138
+ property({ type: String, reflect: true })
139
+ ], StSkeleton.prototype, "animation", void 0);
69
140
  __decorate([
70
141
  property({ type: String })
71
142
  ], StSkeleton.prototype, "width", void 0);
package/dist/components/vertical-nav/vertical-nav-group.d.ts CHANGED
@@ -7,4 +7,9 @@ export declare class StNavGroup extends LitElement {
7
7
  private _toggle;
8
8
  render(): import("lit-html").TemplateResult<1>;
9
9
  }
10
+ declare global {
11
+ interface HTMLElementTagNameMap {
12
+ 'st-vertical-nav-group': StNavGroup;
13
+ }
14
+ }
10
15
  //# sourceMappingURL=vertical-nav-group.d.ts.map
package/dist/components/vertical-nav/vertical-nav-group.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vertical-nav-group.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACZ,KAAK,SAAM;IACK,IAAI,UAAS;IAC7B,KAAK,SAAK;IAEtC,MAAM,CAAC,MAAM,4BA8EX;IAEF,OAAO,CAAC,OAAO;IAIf,MAAM,yCAcL;CACF"}
1
+ {"version":3,"file":"vertical-nav-group.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACZ,KAAK,SAAM;IACK,IAAI,UAAS;IAC7B,KAAK,SAAK;IAEtC,MAAM,CAAC,MAAM,4BA8EX;IAEF,OAAO,CAAC,OAAO;IAIf,MAAM,yCAcL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,UAAU,CAAC;KACrC;CACF"}
package/dist/components/vertical-nav/vertical-nav-item.d.ts CHANGED
@@ -6,4 +6,9 @@ export declare class StNavItem extends LitElement {
6
6
  static styles: import("lit").CSSResult[];
7
7
  render(): import("lit-html").TemplateResult<1>;
8
8
  }
9
+ declare global {
10
+ interface HTMLElementTagNameMap {
11
+ 'st-vertical-nav-item': StNavItem;
12
+ }
13
+ }
9
14
  //# sourceMappingURL=vertical-nav-item.d.ts.map
package/dist/components/vertical-nav/vertical-nav-item.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vertical-nav-item.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,SAAU,SAAQ,UAAU;IACX,IAAI,SAAO;IACK,MAAM,UAAS;IAC/B,KAAK,SAAK;IAEtC,MAAM,CAAC,MAAM,4BA8CX;IAEF,MAAM,yCAOL;CACF"}
1
+ {"version":3,"file":"vertical-nav-item.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,SAAU,SAAQ,UAAU;IACX,IAAI,SAAO;IACK,MAAM,UAAS;IAC/B,KAAK,SAAK;IAEtC,MAAM,CAAC,MAAM,4BA8CX;IAEF,MAAM,yCAOL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,SAAS,CAAC;KACnC;CACF"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sondor-technology/sondor-components",
3
- "version": "1.0.1-develop.3",
3
+ "version": "1.0.1-develop.5",
4
4
  "description": "",
5
5
  "main": "src/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/skeleton/skeleton.ts CHANGED
@@ -4,26 +4,69 @@ import { resetStyles } from '../../styles/reset.js';
4
4
 
5
5
  @customElement('st-skeleton')
6
6
  export class StSkeleton extends LitElement {
7
- /** Variant shape: 'text' | 'circular' | 'rectangular' */
8
- @property({ type: String }) variant: 'text' | 'circular' | 'rectangular' = 'text';
9
-
10
- /** Custom width override (e.g., '200px', '50%') */
7
+ @property({ type: String, reflect: true }) variant: 'text' | 'circular' | 'rectangular' = 'text';
8
+ @property({ type: String, reflect: true }) animation: 'shimmer' | 'pulse' | 'none' = 'shimmer';
11
9
  @property({ type: String }) width = '';
12
-
13
- /** Custom height override (e.g., '40px', '1rem') */
14
10
  @property({ type: String }) height = '';
15
11
 
12
+ // Apply properties directly to the :host as CSS variables when they change
13
+ updated(changedProperties: Map<string | number | symbol, unknown>) {
14
+ super.updated(changedProperties);
15
+
16
+ if (changedProperties.has('width')) {
17
+ if (this.width) {
18
+ this.style.setProperty('--st-skeleton-width', this.width);
19
+ } else {
20
+ this.style.removeProperty('--st-skeleton-width');
21
+ }
22
+ }
23
+
24
+ if (changedProperties.has('height')) {
25
+ if (this.height) {
26
+ this.style.setProperty('--st-skeleton-height', this.height);
27
+ } else {
28
+ this.style.removeProperty('--st-skeleton-height');
29
+ }
30
+ }
31
+ }
32
+
16
33
  static styles = [
17
34
  resetStyles,
18
35
  css`
19
36
  :host {
20
37
  display: block;
21
- width: 100%;
38
+
39
+ /* Define base sizing variables that can be overridden by props */
40
+ --_width: var(--st-skeleton-width, 100%);
41
+ --_height: var(--st-skeleton-height, 1em);
42
+
43
+ /*
44
+ CRITICAL FIX: Apply sizing directly to the host.
45
+ This allows external classes and styles (like margin: auto) to work perfectly.
46
+ */
47
+ width: var(--_width);
48
+ height: var(--_height);
49
+
50
+ /* Expose radius as a token for external theme overrides */
51
+ --st-skeleton-radius: var(--st-radius-sm, 0.25rem);
52
+ }
53
+
54
+ /* Shape Variants adjust the host's sizing variables */
55
+ :host([variant="circular"]) {
56
+ --_width: var(--st-skeleton-width, 2.5rem);
57
+ --_height: var(--st-skeleton-height, 2.5rem);
58
+ }
59
+
60
+ :host([variant="rectangular"]) {
61
+ --_height: var(--st-skeleton-height, 8rem);
22
62
  }
23
63
 
24
64
  .skeleton {
25
- width: var(--st-skeleton-width, 100%);
26
- height: var(--st-skeleton-height, 1em);
65
+ /* The inner element simply fills the host */
66
+ display: block;
67
+ width: 100%;
68
+ height: 100%;
69
+
27
70
  background: linear-gradient(
28
71
  90deg,
29
72
  var(--st-color-surface-muted, #f1f5f9) 25%,
@@ -31,33 +74,57 @@ export class StSkeleton extends LitElement {
31
74
  var(--st-color-surface-muted, #f1f5f9) 63%
32
75
  );
33
76
  background-size: 400% 100%;
34
- animation: st-shimmer 1.4s ease infinite;
35
- border-radius: var(--st-radius-sm, 0.25rem);
77
+ border-radius: var(--st-skeleton-radius);
78
+
79
+ /* Prevent accidental selection */
80
+ user-select: none;
81
+ pointer-events: none;
36
82
  }
37
83
 
38
84
  :host([variant="circular"]) .skeleton {
39
85
  border-radius: 50%;
40
- height: var(--st-skeleton-height, 2.5rem);
41
- width: var(--st-skeleton-width, 2.5rem);
42
86
  }
43
87
 
44
- :host([variant="rectangular"]) .skeleton {
45
- height: var(--st-skeleton-height, 8rem);
88
+ /* Animations */
89
+ :host([animation="shimmer"]) .skeleton {
90
+ animation: st-shimmer 1.4s ease infinite;
91
+ }
92
+
93
+ :host([animation="pulse"]) .skeleton {
94
+ background: var(--st-color-surface-muted, #f1f5f9);
95
+ animation: st-pulse 1.5s ease-in-out infinite;
96
+ }
97
+
98
+ :host([animation="none"]) .skeleton {
99
+ background: var(--st-color-surface-muted, #f1f5f9);
100
+ animation: none;
101
+ }
102
+
103
+ /* Accessibility: Respect OS reduced motion settings */
104
+ @media (prefers-reduced-motion: reduce) {
105
+ .skeleton {
106
+ animation: none !important;
107
+ background: var(--st-color-surface-muted, #f1f5f9) !important;
108
+ }
46
109
  }
47
110
 
48
111
  @keyframes st-shimmer {
49
112
  0% { background-position: 100% 0; }
50
- 100% { background-position: 0 0; }
113
+ 100% { background-position: -100% 0; }
114
+ }
115
+
116
+ @keyframes st-pulse {
117
+ 0% { opacity: 1; }
118
+ 50% { opacity: 0.4; }
119
+ 100% { opacity: 1; }
51
120
  }
52
121
  `
53
122
  ];
54
123
 
55
124
  render() {
56
- const style = `
57
- ${this.width ? `--st-skeleton-width: ${this.width};` : ''}
58
- ${this.height ? `--st-skeleton-height: ${this.height};` : ''}
125
+ return html`
126
+ <div class="skeleton" aria-hidden="true" part="base"></div>
59
127
  `;
60
- return html`<div class="skeleton" style=${style}></div>`;
61
128
  }
62
129
  }
63
130
 
package/src/components/vertical-nav/vertical-nav-group.ts CHANGED
@@ -107,4 +107,10 @@ export class StNavGroup extends LitElement {
107
107
  </div>
108
108
  `;
109
109
  }
110
+ }
111
+
112
+ declare global {
113
+ interface HTMLElementTagNameMap {
114
+ 'st-vertical-nav-group': StNavGroup;
115
+ }
110
116
  }
package/src/components/vertical-nav/vertical-nav-item.ts CHANGED
@@ -64,4 +64,10 @@ export class StNavItem extends LitElement {
64
64
  </a>
65
65
  `;
66
66
  }
67
+ }
68
+
69
+ declare global {
70
+ interface HTMLElementTagNameMap {
71
+ 'st-vertical-nav-item': StNavItem;
72
+ }
67
73
  }