@nordcode/ui 1.0.4 → 1.0.5

package/CHANGELOG.md

@@ -10,3 +10,15 @@
 
 - Fixed Webkit `<detail>` style
 - Shadows not working using `light-dark`
+
+## v1.0.5 (2024-11-28)
+
+### Fixes
+
+Make fieldset-based inputs more accessible by adding legends. This affects:
+- `nc-tag-select`
+- `nc-segmented-control`
+- `nc-radio-field`
+- `nc-checkbox-field`
+
+Be sure to checkout the updated markup for these components in the documentation.

package/out/complete.css

@@ -1875,24 +1875,18 @@
   }
 
   :where(legend:not([class]), .nc-legend) {
-    font-family: var(--font-family-default);
-    letter-spacing: var(--tracking-tight);
-    font-weight: var(--font-weight-active);
-    color: var(--text, var(--color-text-base));
-    font-size: var(--font-size-base);
     border: none;
     border-radius: 0;
     inline-size: 100%;
-    margin-block-end: .75lh;
     padding: 0;
-    display: block;
   }
 
-  :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend)) {
-    margin-block-end: 0;
+  :where(legend:not([class]), .nc-legend) + * {
+    margin-block-start: var(--nc-legend-spacing, .75lh);
   }
 
   :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend)) + .nc-hint {
+    --nc-legend-spacing: 0;
     margin-block-end: .6lh;
   }
 }
@@ -2210,6 +2204,7 @@
     --_tag-select-checked-text-color: var(--tag-select-checked-text-color, var(--color-brand-primary-contrast));
     --_tag-select-checked-surface-color: var(--tag-select-checked-surface-color, var(--color-brand-primary-base));
     --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
+    --nc-legend-spacing: .25lh;
   }
 
   :where(.nc-tag-select-field):focus-within:has(:focus-visible) {
@@ -2310,43 +2305,45 @@
     background: var(--_input-hover-background);
   }
 
-  :where(.nc-radio-field, .nc-checkbox-field) fieldset, :where(.nc-radio-field, .nc-checkbox-field) fieldset > :not(:first-child) {
+  :where(.nc-radio-field, .nc-checkbox-field) {
+    gap: 0;
+  }
+
+  :where(.nc-radio-field, .nc-checkbox-field) > :not(:first-child) {
     margin-block-start: .6lh;
   }
 }
 
 @layer components.inputs-segmented {
   :where(.nc-segmented-control-group) {
+    --_segmented-control-border-radius: var(--segmented-control-border-radius, var(--_input-border-radius));
+    --_segmented-control-checked-text-color: var(--segmented-control-checked-text-color, var(--color-brand-primary-contrast));
+    --_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color, var(--color-brand-primary-base));
+    --nc-legend-spacing: .25lh;
     container: segmented-control / inline-size;
   }
 
   :where(.nc-segmented-control) {
-    --_segmented-control-border-radius: var(--segmented-control-border-radius, var(--_input-border-radius));
-    --_segmented-control-checked-text-color: var(--segmented-control-checked-text-color, var(--color-brand-primary-contrast));
-    --_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color, var(--color-brand-primary-base));
+    background: var(--_input-background);
+    block-size: auto;
+    inline-size: 100%;
     box-shadow: var(--_input-box-shadow);
     border-radius: var(--_segmented-control-border-radius);
-    background: var(--_input-background);
-    border: none;
     grid-auto-rows: 1fr;
     grid-auto-flow: row;
-    block-size: auto;
-    inline-size: 100%;
-    margin: 0;
-    padding: 0;
     display: grid;
   }
 
-  :where(.nc-segmented-control) input {
-    opacity: 0;
-    position: absolute;
-  }
-
   :where(.nc-segmented-control):focus-within {
     outline: var(--_input-outline);
     outline-offset: 0;
   }
 
+  :where(.nc-segmented-control) input {
+    opacity: 0;
+    position: absolute;
+  }
+
   :where(.nc-segmented-control) label {
     padding-inline: var(--_input-padding-inline);
     padding-block: var(--_input-padding-block);

package/out/complete_configless.css

@@ -1625,24 +1625,18 @@
   }
 
   :where(legend:not([class]), .nc-legend) {
-    font-family: var(--font-family-default);
-    letter-spacing: var(--tracking-tight);
-    font-weight: var(--font-weight-active);
-    color: var(--text, var(--color-text-base));
-    font-size: var(--font-size-base);
     border: none;
     border-radius: 0;
     inline-size: 100%;
-    margin-block-end: .75lh;
     padding: 0;
-    display: block;
   }
 
-  :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend)) {
-    margin-block-end: 0;
+  :where(legend:not([class]), .nc-legend) + * {
+    margin-block-start: var(--nc-legend-spacing, .75lh);
   }
 
   :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend)) + .nc-hint {
+    --nc-legend-spacing: 0;
     margin-block-end: .6lh;
   }
 }
@@ -1960,6 +1954,7 @@
     --_tag-select-checked-text-color: var(--tag-select-checked-text-color, var(--color-brand-primary-contrast));
     --_tag-select-checked-surface-color: var(--tag-select-checked-surface-color, var(--color-brand-primary-base));
     --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
+    --nc-legend-spacing: .25lh;
   }
 
   :where(.nc-tag-select-field):focus-within:has(:focus-visible) {
@@ -2060,43 +2055,45 @@
     background: var(--_input-hover-background);
   }
 
-  :where(.nc-radio-field, .nc-checkbox-field) fieldset, :where(.nc-radio-field, .nc-checkbox-field) fieldset > :not(:first-child) {
+  :where(.nc-radio-field, .nc-checkbox-field) {
+    gap: 0;
+  }
+
+  :where(.nc-radio-field, .nc-checkbox-field) > :not(:first-child) {
     margin-block-start: .6lh;
   }
 }
 
 @layer components.inputs-segmented {
   :where(.nc-segmented-control-group) {
+    --_segmented-control-border-radius: var(--segmented-control-border-radius, var(--_input-border-radius));
+    --_segmented-control-checked-text-color: var(--segmented-control-checked-text-color, var(--color-brand-primary-contrast));
+    --_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color, var(--color-brand-primary-base));
+    --nc-legend-spacing: .25lh;
     container: segmented-control / inline-size;
   }
 
   :where(.nc-segmented-control) {
-    --_segmented-control-border-radius: var(--segmented-control-border-radius, var(--_input-border-radius));
-    --_segmented-control-checked-text-color: var(--segmented-control-checked-text-color, var(--color-brand-primary-contrast));
-    --_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color, var(--color-brand-primary-base));
+    background: var(--_input-background);
+    block-size: auto;
+    inline-size: 100%;
     box-shadow: var(--_input-box-shadow);
     border-radius: var(--_segmented-control-border-radius);
-    background: var(--_input-background);
-    border: none;
     grid-auto-rows: 1fr;
     grid-auto-flow: row;
-    block-size: auto;
-    inline-size: 100%;
-    margin: 0;
-    padding: 0;
     display: grid;
   }
 
-  :where(.nc-segmented-control) input {
-    opacity: 0;
-    position: absolute;
-  }
-
   :where(.nc-segmented-control):focus-within {
     outline: var(--_input-outline);
     outline-offset: 0;
   }
 
+  :where(.nc-segmented-control) input {
+    opacity: 0;
+    position: absolute;
+  }
+
   :where(.nc-segmented-control) label {
     padding-inline: var(--_input-padding-inline);
     padding-block: var(--_input-padding-block);

package/package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
   },
-  "version": "1.0.4",
+  "version": "1.0.5",
   "publishConfig": {
     "access": "public"
   },

package/src/styles/components/forms.css

@@ -24,23 +24,19 @@
     }
 
     :where(legend:not([class]), .nc-legend) {
-        font-family: var(--font-family-default);
-        letter-spacing: var(--tracking-tight);
-        font-weight: var(--font-weight-active);
-        color: var(--text, var(--color-text-base));
-        display: block;
-        font-size: var(--font-size-base);
         padding: 0;
         border: none;
         border-radius: 0;
         inline-size: 100%;
-        margin-block-end: 0.75lh;
+
+        &+* {
+            margin-block-start: var(--nc-legend-spacing, 0.75lh);
+        }
     }
 
     :where( :is(fieldset:not([class]), .nc-fieldset):has( :is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend)) {
-        margin-block-end: 0;
-
         &+.nc-hint {
+            --nc-legend-spacing: 0;
             margin-block-end: 0.6lh;
         }
     }

package/src/styles/components/inputs/fields.css

@@ -8,13 +8,13 @@
         max-inline-size: var(--input-field-max-inline-size);
         place-items: start;
 
-        & > label,
-        & > .nc-stack {
+        &>label,
+        &>.nc-stack {
             gap: 0.125lh;
             line-height: var(--line-height-small);
         }
 
-        & > .nc-cluster {
+        &>.nc-cluster {
             gap: 1ch;
         }
     }
@@ -49,7 +49,7 @@
         place-items: start;
         gap: 0;
 
-        & > [data-label] {
+        &>[data-label] {
             grid-area: label;
             padding-inline-start: 1ch;
         }
@@ -58,7 +58,7 @@
             min-block-size: var(--line-height-base);
         }
 
-        & > [data-input] {
+        &>[data-input] {
             grid-area: checkbox;
         }
 
@@ -68,12 +68,9 @@
     }
 
     :where(.nc-radio-field, .nc-checkbox-field) {
-        & fieldset {
-            margin-block-start: 0.6lh;
-        }
+        gap: 0;
 
-        & fieldset > *:not(:first-child) {
+        >*:not(:first-child) {
             margin-block-start: 0.6lh;
         }
     }
-}

package/src/styles/components/inputs/segmented.css

@@ -1,43 +1,38 @@
 @layer components.inputs-segmented {
     :where(.nc-segmented-control-group) {
+        --_segmented-control-border-radius: var(--segmented-control-border-radius,
+                var(--_input-border-radius));
+        --_segmented-control-checked-text-color: var(--segmented-control-checked-text-color,
+                var(--color-brand-primary-contrast));
+        --_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color,
+                var(--color-brand-primary-base));
+
         container: segmented-control / inline-size;
+
+        --nc-legend-spacing: 0.25lh;
     }
 
     :where(.nc-segmented-control) {
-        --_segmented-control-border-radius: var(
-            --segmented-control-border-radius,
-            var(--_input-border-radius)
-        );
-        --_segmented-control-checked-text-color: var(
-            --segmented-control-checked-text-color,
-            var(--color-brand-primary-contrast)
-        );
-        --_segmented-control-checked-surface-color: var(
-            --segmented-control-checked-surface-color,
-            var(--color-brand-primary-base)
-        );
         display: grid;
         grid-auto-rows: 1fr;
         grid-auto-flow: row;
-        padding: 0;
-        margin: 0;
-        border: none;
-        box-shadow: var(--_input-box-shadow);
-        border-radius: var(--_segmented-control-border-radius);
-        background: var(--_input-background);
+
         block-size: auto;
         inline-size: 100%;
-
-        & input {
-            opacity: 0;
-            position: absolute;
-        }
+        background: var(--_input-background);
+        box-shadow: var(--_input-box-shadow);
+        border-radius: var(--_segmented-control-border-radius);
 
         &:focus-within {
             outline: var(--_input-outline);
             outline-offset: 0;
         }
 
+        & input {
+            opacity: 0;
+            position: absolute;
+        }
+
         & label {
             display: flex;
             padding-inline: var(--_input-padding-inline);
@@ -48,7 +43,7 @@
             align-items: center;
             justify-content: center;
 
-            > .nc-input-label {
+            >.nc-input-label {
                 color: inherit;
             }
 
@@ -58,13 +53,11 @@
             }
 
             &:first-child {
-                border-radius: var(--_segmented-control-border-radius)
-                    var(--_segmented-control-border-radius) 0 0;
+                border-radius: var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0 0;
             }
 
             &:last-child {
-                border-radius: 0 0 var(--_segmented-control-border-radius)
-                    var(--_segmented-control-border-radius);
+                border-radius: 0 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius);
             }
 
             &:not(:last-child) {
@@ -97,15 +90,13 @@
             grid-auto-columns: 1fr;
             grid-auto-flow: column;
 
-            > label {
+            >label {
                 &:first-child {
-                    border-radius: var(--_segmented-control-border-radius) 0 0
-                        var(--_segmented-control-border-radius);
+                    border-radius: var(--_segmented-control-border-radius) 0 0 var(--_segmented-control-border-radius);
                 }
 
                 &:last-child {
-                    border-radius: 0 var(--_segmented-control-border-radius)
-                        var(--_segmented-control-border-radius) 0;
+                    border-radius: 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0;
                 }
 
                 &:not(:last-child) {

package/src/styles/components/inputs/tag-select.css

@@ -1,14 +1,11 @@
 @layer components.inputs {
     :where(.nc-tag-select-field) {
-        --_tag-select-checked-text-color: var(
-            --tag-select-checked-text-color,
-            var(--color-brand-primary-contrast)
-        );
-        --_tag-select-checked-surface-color: var(
-            --tag-select-checked-surface-color,
-            var(--color-brand-primary-base)
-        );
+        --_tag-select-checked-text-color: var(--tag-select-checked-text-color,
+                var(--color-brand-primary-contrast));
+        --_tag-select-checked-surface-color: var(--tag-select-checked-surface-color,
+                var(--color-brand-primary-base));
         --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
+        --nc-legend-spacing: 0.25lh;
 
         &:focus-within:has(:focus-visible) {
             outline-offset: 1ch;