@utrecht/form-fieldset-css 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# @utrecht/form-fieldset-css
+
+## 1.3.0
+
+### Minor Changes
+
+- e497b08: Export CSS string as default export in `dist/index.mjs`.
+
+## 1.2.0
+
+### Minor Changes
+
+- dae106c: Added metadata for form-fieldset tokens.
+
+## 1.1.0
+
+### Minor Changes
+
+- 62f1157: Add SCSS files to `src/` directory of CSS component packages.
+
+## 1.0.0
+
+### Major Changes
+
+- 856d996: Switch from alpha releases to semantic versioning.

package/README.md

@@ -2,50 +2,4 @@
 
 # Fieldset
 
-## States
-
-### `disabled`
-
-Een veldengroep waar alle velden `disabled` zijn.
-
-### `invalid`
-
-Een veldengroep die niet valide is. Gebruik deze voor veldengroepen de als geheel gevalideerd worden, bijvoorbeeld een _radio group_ of een _checkbox group_. Gebruik `invalid` niet voor veldengroepen waar één los onderdeel invalide is, bijvoorbeeld: als één van de vragen nog niet beantwoord is.
-
-## HTML
-
-In HTML kun je de `<fieldset>` en `<legend>` elementen gebruiken, die worden automatisch gekoppeld aan radio buttons en checkboxes.
-
-Voor een radio button group gebruik je `<fieldset role="radiogroup">`, dat maakt het extra duidelijk voor screen reader gebruikers. `<fieldset>` heeft als default `role="group"` en daarom hoef je nooit `<fieldset role="group">` te gebruiken.
-
-De bijzondere browser default stylesheet voor `<fieldset>` en `<legend>` maken het erg moeilijk om CSS te gebruiken voor deze elementen, maar voor toegankelijkheid is het echter zeker de moeite waarde deze elementen toch te gebruiken. Gebruik de reset CSS voor fieldset en legend om geen default styles te gebruiken.
-
-Gebruik een extra `<div>` om je `<fieldset>` zodat het mogelijk wordt een `background-color` of `border` in te stellen, door de browser default stylesheet is dat voor `<fieldset>` niet goed mogelijk.
-
-### HTML attributen
-
-Deze attributen moet je kunnen gebruiken in de fieldset component van een framework:
-
-- `class`
-- [`disabled`](https://html.spec.whatwg.org/multipage/form-elements.html#dom-fieldset-disabled)
-- `hidden`: om een _conditional fieldset_ te maken moet je het `hidden` attribuut kunnen gebruiken
-- `role`: het moet mogelijk zijn `role="radiogroup"` in te stellen
-- `aria-describedby`: gebruik bij voorkeur `<legend>`
-- `aria-invalid`
-
-Deze attributen willen mensen soms ook gebruiken:
-
-- `aria-label`: gebruik bij voorkeur `<legend>`
-- `aria-labelledby`: gebruik bij voorkeur `<legend>`
-- `aria-disabled`: gebruik bij voorkeur `disabled`, behalve als je _client-side form validation_ gebruikt om `aria-disabled` te maken.
-- [`form`](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-fae-form)
-- [`name`](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-fe-name)
-
-## CSS
-
-De tokens voor `background-color` en `border` werken niet goed als alleen een `<fieldset>` wordt gebruikt. Voor goed resultaat is een extra `div` nodig. De HTML component heeft daarom geen goede ondersteuning voor `background-color` en `border`.
-
-## Relevante WCAG regels
-
-- [WCAG eis 1.3.5](https://www.w3.org/TR/WCAG21/#identify-input-purpose)
-  - voor een _radio group_ en _checkbox group_ is fieldset een goede manier het doel van de groep aan te geven
+Groep van gerelateerde formuliervelden.

package/dist/index.css

@@ -1,16 +1,8 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-form-fieldset {
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
@@ -18,7 +10,6 @@
 
 .utrecht-form-fieldset--html-fieldset,
 .utrecht-form-fieldset__fieldset--html-fieldset {
-  /* `all: revert` unfortunately has as side-effect that the `hidde` attribute has no effect */
   all: revert;
   border: 0;
   margin-inline-end: 0;

package/dist/index.min.css

@@ -0,0 +1 @@
+.utrecht-form-fieldset{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-start, 0))}.utrecht-form-fieldset--html-fieldset,.utrecht-form-fieldset__fieldset--html-fieldset{all:revert;border:0;margin-inline-end:0;margin-inline-start:0;min-inline-size:0;padding-block-end:0;padding-block-start:.01em;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset__legend--html-legend{display:table;inline-size:100%;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset--distanced{--utrecht-space-around:1}.utrecht-form-fieldset--section{background-color:var(--utrecht-form-fieldset-section-background-color);color:var(--utrecht-form-fieldset-section-color)}.utrecht-form-fieldset__legend{break-inside:avoid;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));font-family:var(--utrecht-form-fieldset-legend-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-form-fieldset-legend-font-size);font-weight:var(--utrecht-form-fieldset-legend-font-weight);line-height:var(--utrecht-form-fieldset-legend-line-height);page-break-after:avoid;page-break-inside:avoid}.utrecht-form-fieldset__legend--disabled{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}.utrecht-form-fieldset__legend--distanced{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-start, 0))}.utrecht-form-fieldset--invalid{border-inline-start-color:var(--utrecht-form-fieldset-invalid-border-inline-start-color,var(--utrecht-form-field-invalid-border-inline-start-color));border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-fieldset-invalid-border-inline-start-width,var(--utrecht-form-field-invalid-border-inline-start-width));padding-inline-start:var(--utrecht-form-fieldset-invalid-padding-inline-start,var(--utrecht-form-field-invalid-padding-inline-start))}

package/dist/index.mjs

@@ -0,0 +1 @@
+export default ".utrecht-form-fieldset{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-start, 0))}.utrecht-form-fieldset--html-fieldset,.utrecht-form-fieldset__fieldset--html-fieldset{all:revert;border:0;margin-inline-end:0;margin-inline-start:0;min-inline-size:0;padding-block-end:0;padding-block-start:.01em;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset__legend--html-legend{display:table;inline-size:100%;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset--distanced{--utrecht-space-around:1}.utrecht-form-fieldset--section{background-color:var(--utrecht-form-fieldset-section-background-color);color:var(--utrecht-form-fieldset-section-color)}.utrecht-form-fieldset__legend{break-inside:avoid;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));font-family:var(--utrecht-form-fieldset-legend-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-form-fieldset-legend-font-size);font-weight:var(--utrecht-form-fieldset-legend-font-weight);line-height:var(--utrecht-form-fieldset-legend-line-height);page-break-after:avoid;page-break-inside:avoid}.utrecht-form-fieldset__legend--disabled{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}.utrecht-form-fieldset__legend--distanced{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-start, 0))}.utrecht-form-fieldset--invalid{border-inline-start-color:var(--utrecht-form-fieldset-invalid-border-inline-start-color,var(--utrecht-form-field-invalid-border-inline-start-color));border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-fieldset-invalid-border-inline-start-width,var(--utrecht-form-field-invalid-border-inline-start-width));padding-inline-start:var(--utrecht-form-fieldset-invalid-padding-inline-start,var(--utrecht-form-field-invalid-padding-inline-start))}";

package/dist/index.mjs.d.ts

@@ -0,0 +1,2 @@
+declare const css: string;
+export default css;

package/docs/anatomy.nl.md

@@ -0,0 +1,13 @@
+<!-- @license CC0-1.0 -->
+
+# Anatomie
+
+## States
+
+### `disabled`
+
+Een veldengroep waar alle velden `disabled` zijn.
+
+### `invalid`
+
+Een veldengroep die niet valide is. Gebruik deze voor veldengroepen de als geheel gevalideerd worden, bijvoorbeeld een _radio group_ of een _checkbox group_. Gebruik `invalid` niet voor veldengroepen waar één los onderdeel invalide is, bijvoorbeeld: als één van de vragen nog niet beantwoord is.

package/docs/technology-css.nl.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# CSS
+
+De tokens voor `background-color` en `border` werken niet goed als alleen een `<fieldset>` wordt gebruikt. Voor goed resultaat is een extra `div` nodig. De HTML component heeft daarom geen goede ondersteuning voor `background-color` en `border`.

package/docs/technology-html.nl.md

@@ -0,0 +1,30 @@
+<!-- @license CC0-1.0 -->
+
+# HTML
+
+In HTML kun je de `<fieldset>` en `<legend>` elementen gebruiken, die worden automatisch gekoppeld aan radio buttons en checkboxes.
+
+Voor een radio button group gebruik je `<fieldset role="radiogroup">`, dat maakt het extra duidelijk voor screen reader gebruikers. `<fieldset>` heeft als default `role="group"` en daarom hoef je nooit `<fieldset role="group">` te gebruiken.
+
+De bijzondere browser default stylesheet voor `<fieldset>` en `<legend>` maken het erg moeilijk om CSS te gebruiken voor deze elementen, maar voor toegankelijkheid is het echter zeker de moeite waarde deze elementen toch te gebruiken. Gebruik de reset CSS voor fieldset en legend om geen default styles te gebruiken.
+
+Gebruik een extra `<div>` om je `<fieldset>` zodat het mogelijk wordt een `background-color` of `border` in te stellen, door de browser default stylesheet is dat voor `<fieldset>` niet goed mogelijk.
+
+## HTML attributen
+
+Deze attributen moet je kunnen gebruiken in de fieldset component van een framework:
+
+- `class`
+- [`disabled`](https://html.spec.whatwg.org/multipage/form-elements.html#dom-fieldset-disabled)
+- `hidden`: om een _conditional fieldset_ te maken moet je het `hidden` attribuut kunnen gebruiken
+- `role`: het moet mogelijk zijn `role="radiogroup"` in te stellen
+- `aria-describedby`: gebruik bij voorkeur `<legend>`
+- `aria-invalid`
+
+Deze attributen willen mensen soms ook gebruiken:
+
+- `aria-label`: gebruik bij voorkeur `<legend>`
+- `aria-labelledby`: gebruik bij voorkeur `<legend>`
+- `aria-disabled`: gebruik bij voorkeur `disabled`, behalve als je _client-side form validation_ gebruikt om `aria-disabled` te maken.
+- [`form`](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-fae-form)
+- [`name`](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-fe-name)

package/docs/wcag.nl.md

@@ -0,0 +1,6 @@
+<!-- @license CC0-1.0 -->
+
+# Relevante WCAG regels
+
+- [WCAG eis 1.3.5](https://www.w3.org/TR/WCAG21/#identify-input-purpose)
+  - voor een _radio group_ en _checkbox group_ is fieldset een goede manier het doel van de groep aan te geven

package/package.json

@@ -1,16 +1,18 @@
 {
-  "version": "1.1.0",
+  "version": "1.3.0",
   "author": "Community for NL Design System",
   "description": "Form fieldset component for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
   "name": "@utrecht/form-fieldset-css",
   "files": [
     "dist/",
-    "src/"
+    "docs/",
+    "src/",
+    "*.md"
   ],
   "main": "dist/index.css",
   "devDependencies": {
-    "rollup": "3.29.4"
+    "@utrecht/build-utils-css": "0.0.1"
   },
   "keywords": [
     "nl-design-system"
@@ -18,8 +20,13 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/utrecht.git",
+    "directory": "components/form-fieldset"
+  },
   "scripts": {
-    "build": "rollup -c ../rollup.config.mjs",
+    "build": "build-css-package",
     "clean": "rimraf dist"
   }
 }

package/src/_mixin.scss

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
 @import "./reset";

package/src/_reset.scss

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
 @mixin reset-fieldset {

package/src/html/_mixin.scss

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
 @import "../mixin";

package/src/html/index.scss

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
 @import "./mixin";

package/src/index.scss

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
 @import "./mixin";

package/src/story-template.jsx

@@ -1,7 +1,7 @@
-/*
+/**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
 import clsx from 'clsx';

package/src/tokens.json

@@ -6,16 +6,20 @@
           "nl.nldesignsystem.css.property": {
             "syntax": "<length>",
             "inherits": true
-          }
-        }
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
       },
       "margin-block-start": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
             "syntax": "<length>",
             "inherits": true
-          }
-        }
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
       },
       "invalid": {
         "border-inline-start-color": {
@@ -24,8 +28,10 @@
               "nl.nldesignsystem.css.property": {
                 "syntax": "<color>",
                 "inherits": true
-              }
-            }
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
           }
         },
         "border-inline-start-width": {
@@ -33,16 +39,20 @@
             "nl.nldesignsystem.css.property": {
               "syntax": "<length>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "borderWidth"
         },
         "padding-inline-start": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "<length>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
         }
       },
       "section": {
@@ -51,16 +61,20 @@
             "nl.nldesignsystem.css.property": {
               "syntax": "<color>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
         },
         "color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "<color>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
         }
       },
       "legend": {
@@ -69,56 +83,70 @@
             "nl.nldesignsystem.css.property": {
               "syntax": "<color>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
         },
         "font-family": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "*",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "fontFamilies"
         },
         "font-size": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "<length>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "fontSizes"
         },
         "font-weight": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "<number>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "fontWeights"
         },
         "line-height": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
+              "syntax": "<length> | <number>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "lineHeights"
         },
         "margin-block-end": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "<length>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
         },
         "margin-block-start": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "<length>",
               "inherits": true
-            }
-          }
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
         },
         "disabled": {
           "color": {
@@ -126,8 +154,10 @@
               "nl.nldesignsystem.css.property": {
                 "syntax": "<color>",
                 "inherits": true
-              }
-            }
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
           }
         }
       }

package/dist/index.js

@@ -1 +0,0 @@
-var undefined$1 = undefined;export{undefined$1 as default};