@dillingerstaffing/strand-ui 0.8.0 → 0.9.0

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 (6) hide show
  1. package/HTML_REFERENCE.md +11 -0
  2. package/dist/css/strand-ui.css +19 -1
  3. package/package.json +2 -2
  4. package/src/components/Card/Card.css +2 -0
  5. package/src/components/Grid/Grid.css +6 -1
  6. package/src/static.css +11 -0
package/HTML_REFERENCE.md CHANGED
@@ -865,3 +865,14 @@ The monospace uppercase tracked label pattern. Used for section labels, category
865
865
  ```
866
866
 
867
867
  Intro paragraph. Max 50 characters per line. Used after headlines.
868
+
869
+ ### Secondary Text
870
+
871
+ ```html
872
+ <p class="strand-text-secondary">Supporting description for a card, feature, or section.</p>
873
+ <span class="strand-text-secondary strand-text-secondary--xs">Fine print or metadata.</span>
874
+ ```
875
+
876
+ Caption/description text. text-sm, gray-500, relaxed leading. The `--xs` modifier reduces to text-xs for metadata and fine print.
877
+
878
+ > **DL foundation:** [DESIGN_LANGUAGE.md Part III.8 Color Roles](./DESIGN_LANGUAGE.md#L290) defines gray-500 as the secondary text role. [Part IV.7 Named Text Patterns](./DESIGN_LANGUAGE.md#L408) specifies the Secondary pattern.
package/dist/css/strand-ui.css CHANGED
@@ -488,6 +488,7 @@
488
488
 
489
489
  /* ── Variants ── */
490
490
  .strand-card--elevated {
491
+ border: 1px solid var(--strand-border-subtle);
491
492
  box-shadow: var(--strand-elevation-1);
492
493
  }
493
494
 
@@ -497,6 +498,7 @@
497
498
  }
498
499
 
499
500
  .strand-card--interactive {
501
+ border: 1px solid var(--strand-border-subtle);
500
502
  box-shadow: var(--strand-elevation-1);
501
503
  cursor: pointer;
502
504
  transition:
@@ -960,11 +962,16 @@
960
962
  min-width: 0;
961
963
  }
962
964
 
963
- /* ── Column utilities ── */
965
+ /* ── Fixed column utilities ── */
964
966
  .strand-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
965
967
  .strand-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
966
968
  .strand-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
967
969
 
970
+ /* ── Responsive auto-fit (columns adjust to available width) ── */
971
+ .strand-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
972
+ .strand-grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
973
+ .strand-grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
974
+
968
975
  /* ── Gap utilities ── */
969
976
  .strand-grid--gap-1 { gap: var(--strand-space-1); }
970
977
  .strand-grid--gap-2 { gap: var(--strand-space-2); }
@@ -2647,4 +2654,15 @@
2647
2654
  line-height: var(--strand-leading-relaxed);
2648
2655
  }
2649
2656
 
2657
+ /* ── Secondary text (caption/description, DL Part III.8 Color Roles) ── */
2658
+ .strand-text-secondary {
2659
+ font-size: var(--strand-text-sm);
2660
+ color: var(--strand-gray-500);
2661
+ line-height: var(--strand-leading-relaxed);
2662
+ }
2663
+
2664
+ .strand-text-secondary--xs {
2665
+ font-size: var(--strand-text-xs);
2666
+ }
2667
+
2650
2668
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dillingerstaffing/strand-ui",
3
- "version": "0.8.0",
3
+ "version": "0.9.0",
4
4
  "description": "Strand UI - Preact/React component library built on the Strand Design Language",
5
5
  "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
6
6
  "license": "MIT",
@@ -60,7 +60,7 @@
60
60
  }
61
61
  },
62
62
  "dependencies": {
63
- "@dillingerstaffing/strand": "^0.8.0"
63
+ "@dillingerstaffing/strand": "^0.9.0"
64
64
  },
65
65
  "devDependencies": {
66
66
  "@testing-library/preact": "^3.2.0",
package/src/components/Card/Card.css CHANGED
@@ -12,6 +12,7 @@
12
12
 
13
13
  /* ── Variants ── */
14
14
  .strand-card--elevated {
15
+ border: 1px solid var(--strand-border-subtle);
15
16
  box-shadow: var(--strand-elevation-1);
16
17
  }
17
18
 
@@ -21,6 +22,7 @@
21
22
  }
22
23
 
23
24
  .strand-card--interactive {
25
+ border: 1px solid var(--strand-border-subtle);
24
26
  box-shadow: var(--strand-elevation-1);
25
27
  cursor: pointer;
26
28
  transition:
package/src/components/Grid/Grid.css CHANGED
@@ -12,11 +12,16 @@
12
12
  min-width: 0;
13
13
  }
14
14
 
15
- /* ── Column utilities ── */
15
+ /* ── Fixed column utilities ── */
16
16
  .strand-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
17
17
  .strand-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
18
18
  .strand-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
19
19
 
20
+ /* ── Responsive auto-fit (columns adjust to available width) ── */
21
+ .strand-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
22
+ .strand-grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
23
+ .strand-grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
24
+
20
25
  /* ── Gap utilities ── */
21
26
  .strand-grid--gap-1 { gap: var(--strand-space-1); }
22
27
  .strand-grid--gap-2 { gap: var(--strand-space-2); }
package/src/static.css CHANGED
@@ -84,3 +84,14 @@
84
84
  max-width: 50ch;
85
85
  line-height: var(--strand-leading-relaxed);
86
86
  }
87
+
88
+ /* ── Secondary text (caption/description, DL Part III.8 Color Roles) ── */
89
+ .strand-text-secondary {
90
+ font-size: var(--strand-text-sm);
91
+ color: var(--strand-gray-500);
92
+ line-height: var(--strand-leading-relaxed);
93
+ }
94
+
95
+ .strand-text-secondary--xs {
96
+ font-size: var(--strand-text-xs);
97
+ }