@pure-ds/storybook 0.4.20 → 0.4.22

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 (5) hide show
  1. package/dist/pds-reference.json +1 -1
  2. package/package.json +2 -2
  3. package/public/assets/js/app.js +21 -8
  4. package/public/assets/js/pds.js +21 -8
  5. package/src/js/pds-core/pds-generator.js +21 -8
package/dist/pds-reference.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "generatedAt": "2026-01-14T09:38:58.827Z",
2
+ "generatedAt": "2026-01-14T14:38:06.516Z",
3
3
  "sources": {
4
4
  "customElements": "custom-elements.json",
5
5
  "ontology": "src\\js\\pds-core\\pds-ontology.js",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pure-ds/storybook",
3
- "version": "0.4.20",
3
+ "version": "0.4.22",
4
4
  "description": "Storybook showcase for Pure Design System with live configuration",
5
5
  "type": "module",
6
6
  "private": false,
@@ -37,7 +37,7 @@
37
37
  "pds:build-icons": "pds-build-icons"
38
38
  },
39
39
  "peerDependencies": {
40
- "@pure-ds/core": "^0.4.20"
40
+ "@pure-ds/core": "^0.4.22"
41
41
  },
42
42
  "dependencies": {
43
43
  "@custom-elements-manifest/analyzer": "^0.11.0",
package/public/assets/js/app.js CHANGED
@@ -645,6 +645,10 @@ fieldset {
645
645
  color: var(--color-primary-700);
646
646
  }
647
647
  }
648
+
649
+ input[type="checkbox"]{
650
+ border-radius: var(--radius-xs);
651
+ }
648
652
 
649
653
  input[type="radio"],
650
654
  input[type="checkbox"] {
@@ -653,18 +657,27 @@ fieldset {
653
657
  width: var(--spacing-5);
654
658
  height: var(--spacing-5);
655
659
  min-height: var(--spacing-5);
660
+ padding: var(--spacing-2);
656
661
  margin: 0;
657
662
  cursor: pointer;
658
663
  flex-shrink: 0;
659
664
  accent-color: var(--color-primary-600);
660
- appearance: auto;
661
- -webkit-appearance: auto;
662
- -moz-appearance: auto;
663
-
664
- &:focus {
665
- outline: 2px solid var(--color-primary-500);
666
- outline-offset: 2px;
665
+
666
+ &:focus-visible {
667
+ outline: none;
668
+
669
+ box-shadow:
670
+ 0 0 0 2px var(--color-primary-500),
671
+ 0 0 0 4px color-mix(in srgb,
672
+ var(--color-primary-500) 40%,
673
+ transparent
674
+ );
667
675
  }
676
+
677
+ &:checked {
678
+ background-color: var(--color-primary-600);
679
+ }
680
+
668
681
  }
669
682
  }
670
683
 
@@ -998,7 +1011,7 @@ fieldset[role="group"].buttons {
998
1011
  justify-content: center;
999
1012
  min-height: calc(${b}px * 0.75);
1000
1013
  padding: calc(var(--spacing-1) * ${p*.6}) calc(var(--spacing-4) * 0.85);
1001
- border: ${g}px solid var(--color-border);
1014
+ border: 2px solid var(--color-border);
1002
1015
  border-radius: var(--radius-md);
1003
1016
  font-family: var(--font-family-body);
1004
1017
  font-size: var(--font-size-sm);
package/public/assets/js/pds.js CHANGED
@@ -643,6 +643,10 @@ fieldset {
643
643
  color: var(--color-primary-700);
644
644
  }
645
645
  }
646
+
647
+ input[type="checkbox"]{
648
+ border-radius: var(--radius-xs);
649
+ }
646
650
 
647
651
  input[type="radio"],
648
652
  input[type="checkbox"] {
@@ -651,18 +655,27 @@ fieldset {
651
655
  width: var(--spacing-5);
652
656
  height: var(--spacing-5);
653
657
  min-height: var(--spacing-5);
658
+ padding: var(--spacing-2);
654
659
  margin: 0;
655
660
  cursor: pointer;
656
661
  flex-shrink: 0;
657
662
  accent-color: var(--color-primary-600);
658
- appearance: auto;
659
- -webkit-appearance: auto;
660
- -moz-appearance: auto;
661
-
662
- &:focus {
663
- outline: 2px solid var(--color-primary-500);
664
- outline-offset: 2px;
663
+
664
+ &:focus-visible {
665
+ outline: none;
666
+
667
+ box-shadow:
668
+ 0 0 0 2px var(--color-primary-500),
669
+ 0 0 0 4px color-mix(in srgb,
670
+ var(--color-primary-500) 40%,
671
+ transparent
672
+ );
665
673
  }
674
+
675
+ &:checked {
676
+ background-color: var(--color-primary-600);
677
+ }
678
+
666
679
  }
667
680
  }
668
681
 
@@ -996,7 +1009,7 @@ fieldset[role="group"].buttons {
996
1009
  justify-content: center;
997
1010
  min-height: calc(${m}px * 0.75);
998
1011
  padding: calc(var(--spacing-1) * ${p*.6}) calc(var(--spacing-4) * 0.85);
999
- border: ${h}px solid var(--color-border);
1012
+ border: 2px solid var(--color-border);
1000
1013
  border-radius: var(--radius-md);
1001
1014
  font-family: var(--font-family-body);
1002
1015
  font-size: var(--font-size-sm);
package/src/js/pds-core/pds-generator.js CHANGED
@@ -1838,6 +1838,10 @@ fieldset {
1838
1838
  color: var(--color-primary-700);
1839
1839
  }
1840
1840
  }
1841
+
1842
+ input[type="checkbox"]{
1843
+ border-radius: var(--radius-xs);
1844
+ }
1841
1845
 
1842
1846
  input[type="radio"],
1843
1847
  input[type="checkbox"] {
@@ -1846,18 +1850,27 @@ fieldset {
1846
1850
  width: var(--spacing-5);
1847
1851
  height: var(--spacing-5);
1848
1852
  min-height: var(--spacing-5);
1853
+ padding: var(--spacing-2);
1849
1854
  margin: 0;
1850
1855
  cursor: pointer;
1851
1856
  flex-shrink: 0;
1852
1857
  accent-color: var(--color-primary-600);
1853
- appearance: auto;
1854
- -webkit-appearance: auto;
1855
- -moz-appearance: auto;
1856
-
1857
- &:focus {
1858
- outline: 2px solid var(--color-primary-500);
1859
- outline-offset: 2px;
1858
+
1859
+ &:focus-visible {
1860
+ outline: none;
1861
+
1862
+ box-shadow:
1863
+ 0 0 0 2px var(--color-primary-500),
1864
+ 0 0 0 4px color-mix(in srgb,
1865
+ var(--color-primary-500) 40%,
1866
+ transparent
1867
+ );
1860
1868
  }
1869
+
1870
+ &:checked {
1871
+ background-color: var(--color-primary-600);
1872
+ }
1873
+
1861
1874
  }
1862
1875
  }
1863
1876
 
@@ -2201,7 +2214,7 @@ fieldset[role="group"].buttons {
2201
2214
  padding: calc(var(--spacing-1) * ${
2202
2215
  buttonPaddingValue * 0.6
2203
2216
  }) calc(var(--spacing-4) * 0.85);
2204
- border: ${borderWidth}px solid var(--color-border);
2217
+ border: 2px solid var(--color-border);
2205
2218
  border-radius: var(--radius-md);
2206
2219
  font-family: var(--font-family-body);
2207
2220
  font-size: var(--font-size-sm);