@utrecht/form-toggle-css 1.3.0 → 1.5.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 (8) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/index.css +3 -0
  3. package/dist/index.min.css +1 -1
  4. package/dist/index.mjs +1 -1
  5. package/dist/tokens.d.mts +4 -0
  6. package/dist/tokens.mjs +372 -0
  7. package/package.json +2 -2
  8. package/src/tokens.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @utrecht/form-toggle-css
2
2
 
3
+ ## 1.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - b5deff8: Fixed metadata for Form toggle tokens.
8
+
9
+ ## 1.4.0
10
+
11
+ ### Minor Changes
12
+
13
+ - 725617a: Add `tokens.mjs` and `tokens.d.mts` files to CSS packages.
14
+
3
15
  ## 1.3.0
4
16
 
5
17
  ### Minor Changes
package/dist/index.css CHANGED
@@ -43,6 +43,7 @@
43
43
  outline-offset: var(--utrecht-focus-outline-offset, revert);
44
44
  outline-style: var(--utrecht-focus-outline-style, revert);
45
45
  outline-width: var(--utrecht-focus-outline-width, revert);
46
+ z-index: 1;
46
47
  }
47
48
 
48
49
  .utrecht-form-toggle--hover {
@@ -111,6 +112,7 @@
111
112
  outline-offset: var(--utrecht-focus-outline-offset, revert);
112
113
  outline-style: var(--utrecht-focus-outline-style, revert);
113
114
  outline-width: var(--utrecht-focus-outline-width, revert);
115
+ z-index: 1;
114
116
  }
115
117
 
116
118
  .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
@@ -134,4 +136,5 @@
134
136
  outline-offset: var(--utrecht-focus-outline-offset, revert);
135
137
  outline-style: var(--utrecht-focus-outline-style, revert);
136
138
  outline-width: var(--utrecht-focus-outline-width, revert);
139
+ z-index: 1;
137
140
  }
package/dist/index.min.css CHANGED
@@ -1 +1 @@
1
- .utrecht-form-toggle{align-items:center;block-size:var(--utrecht-form-toggle-height,2em);border-color:var(--utrecht-form-toggle-border-color,currentColor);border-radius:var(--utrecht-form-toggle-border-radius,999rem);border-style:var(--utrecht-form-toggle-border-style,solid);border-width:var(--utrecht-form-toggle-border-width,1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor,revert);display:flex;inline-size:var(--utrecht-form-toggle-width,6em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.utrecht-form-toggle{--utrecht-form-toggle-background-color:ButtonFace;--utrecht-form-toggle-border-color:buttonborder;--utrecht-form-toggle-border-width:1px;--utrecht-form-toggle-border-radius:var(--utrecht-form-toggle-track-border-radius);--utrecht-form-toggle-thumb-background-color:ButtonText;--utrecht-form-toggle-thumb-disabled-background-color:GrayText;border-color:var(--utrecht-form-toggle-track-disabled-border-color,var(--utrecht-form-toggle-track-border-color));border-width:min(var(--utrecht-form-toggle-border-width,1px),1px)}}.utrecht-form-toggle--focus-visible,.utrecht-form-toggle--html-div:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert)}.utrecht-form-toggle--hover{background-color:var(--utrecht-form-toggle-hover-background-color,var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color,var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled,.utrecht-form-toggle--html-div:disabled{border-color:var(--utrecht-form-toggle-disabled-border-color,var(--utrecht-form-toggle-border-color,currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style,var(--utrecht-form-toggle-border-style,solid));border-width:var(--utrecht-form-toggle-disabled-border-width,var(--utrecht-form-toggle-border-width,1px));cursor:var(--utrecht-action-disabled-cursor,not-allowed)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color,currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius,50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end,0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start,0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size,1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size,1.5em);z-index:20}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--checked{margin-inline-start:auto}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--not-checked{margin-inline-end:auto}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--disabled{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color,#aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow,0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);block-size:100%;border-radius:var(--utrecht-form-toggle-track-border-radius,var(--utrecht-form-toggle-border-radius));display:flex;inline-size:100%}.utrecht-form-toggle__track--html-label{cursor:inherit}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track,.utrecht-form-toggle__track--checked{background-color:var(--utrecht-form-toggle-checked-accent-color,var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track,.utrecht-form-toggle__track--disabled{background-color:var(--utrecht-form-toggle-disabled-background-color,#ddd);color:var(--utrecht-form-toggle-disabled-color,#000)}.utrecht-form-toggle__track--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert)}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{block-size:1px!important;border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;inline-size:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible~.utrecht-form-toggle__track{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert)}
1
+ .utrecht-form-toggle{align-items:center;block-size:var(--utrecht-form-toggle-height,2em);border-color:var(--utrecht-form-toggle-border-color,currentColor);border-radius:var(--utrecht-form-toggle-border-radius,999rem);border-style:var(--utrecht-form-toggle-border-style,solid);border-width:var(--utrecht-form-toggle-border-width,1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor,revert);display:flex;inline-size:var(--utrecht-form-toggle-width,6em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.utrecht-form-toggle{--utrecht-form-toggle-background-color:ButtonFace;--utrecht-form-toggle-border-color:buttonborder;--utrecht-form-toggle-border-width:1px;--utrecht-form-toggle-border-radius:var(--utrecht-form-toggle-track-border-radius);--utrecht-form-toggle-thumb-background-color:ButtonText;--utrecht-form-toggle-thumb-disabled-background-color:GrayText;border-color:var(--utrecht-form-toggle-track-disabled-border-color,var(--utrecht-form-toggle-track-border-color));border-width:min(var(--utrecht-form-toggle-border-width,1px),1px)}}.utrecht-form-toggle--focus-visible,.utrecht-form-toggle--html-div:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);z-index:1}.utrecht-form-toggle--hover{background-color:var(--utrecht-form-toggle-hover-background-color,var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color,var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled,.utrecht-form-toggle--html-div:disabled{border-color:var(--utrecht-form-toggle-disabled-border-color,var(--utrecht-form-toggle-border-color,currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style,var(--utrecht-form-toggle-border-style,solid));border-width:var(--utrecht-form-toggle-disabled-border-width,var(--utrecht-form-toggle-border-width,1px));cursor:var(--utrecht-action-disabled-cursor,not-allowed)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color,currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius,50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end,0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start,0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size,1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size,1.5em);z-index:20}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--checked{margin-inline-start:auto}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--not-checked{margin-inline-end:auto}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--disabled{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color,#aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow,0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);block-size:100%;border-radius:var(--utrecht-form-toggle-track-border-radius,var(--utrecht-form-toggle-border-radius));display:flex;inline-size:100%}.utrecht-form-toggle__track--html-label{cursor:inherit}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track,.utrecht-form-toggle__track--checked{background-color:var(--utrecht-form-toggle-checked-accent-color,var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track,.utrecht-form-toggle__track--disabled{background-color:var(--utrecht-form-toggle-disabled-background-color,#ddd);color:var(--utrecht-form-toggle-disabled-color,#000)}.utrecht-form-toggle__track--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);z-index:1}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{block-size:1px!important;border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;inline-size:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible~.utrecht-form-toggle__track{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);z-index:1}
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export default ".utrecht-form-toggle{align-items:center;block-size:var(--utrecht-form-toggle-height,2em);border-color:var(--utrecht-form-toggle-border-color,currentColor);border-radius:var(--utrecht-form-toggle-border-radius,999rem);border-style:var(--utrecht-form-toggle-border-style,solid);border-width:var(--utrecht-form-toggle-border-width,1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor,revert);display:flex;inline-size:var(--utrecht-form-toggle-width,6em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.utrecht-form-toggle{--utrecht-form-toggle-background-color:ButtonFace;--utrecht-form-toggle-border-color:buttonborder;--utrecht-form-toggle-border-width:1px;--utrecht-form-toggle-border-radius:var(--utrecht-form-toggle-track-border-radius);--utrecht-form-toggle-thumb-background-color:ButtonText;--utrecht-form-toggle-thumb-disabled-background-color:GrayText;border-color:var(--utrecht-form-toggle-track-disabled-border-color,var(--utrecht-form-toggle-track-border-color));border-width:min(var(--utrecht-form-toggle-border-width,1px),1px)}}.utrecht-form-toggle--focus-visible,.utrecht-form-toggle--html-div:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert)}.utrecht-form-toggle--hover{background-color:var(--utrecht-form-toggle-hover-background-color,var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color,var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled,.utrecht-form-toggle--html-div:disabled{border-color:var(--utrecht-form-toggle-disabled-border-color,var(--utrecht-form-toggle-border-color,currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style,var(--utrecht-form-toggle-border-style,solid));border-width:var(--utrecht-form-toggle-disabled-border-width,var(--utrecht-form-toggle-border-width,1px));cursor:var(--utrecht-action-disabled-cursor,not-allowed)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color,currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius,50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end,0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start,0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size,1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size,1.5em);z-index:20}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--checked{margin-inline-start:auto}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--not-checked{margin-inline-end:auto}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--disabled{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color,#aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow,0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);block-size:100%;border-radius:var(--utrecht-form-toggle-track-border-radius,var(--utrecht-form-toggle-border-radius));display:flex;inline-size:100%}.utrecht-form-toggle__track--html-label{cursor:inherit}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track,.utrecht-form-toggle__track--checked{background-color:var(--utrecht-form-toggle-checked-accent-color,var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track,.utrecht-form-toggle__track--disabled{background-color:var(--utrecht-form-toggle-disabled-background-color,#ddd);color:var(--utrecht-form-toggle-disabled-color,#000)}.utrecht-form-toggle__track--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert)}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{block-size:1px!important;border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;inline-size:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible~.utrecht-form-toggle__track{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert)}";
1
+ export default ".utrecht-form-toggle{align-items:center;block-size:var(--utrecht-form-toggle-height,2em);border-color:var(--utrecht-form-toggle-border-color,currentColor);border-radius:var(--utrecht-form-toggle-border-radius,999rem);border-style:var(--utrecht-form-toggle-border-style,solid);border-width:var(--utrecht-form-toggle-border-width,1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor,revert);display:flex;inline-size:var(--utrecht-form-toggle-width,6em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.utrecht-form-toggle{--utrecht-form-toggle-background-color:ButtonFace;--utrecht-form-toggle-border-color:buttonborder;--utrecht-form-toggle-border-width:1px;--utrecht-form-toggle-border-radius:var(--utrecht-form-toggle-track-border-radius);--utrecht-form-toggle-thumb-background-color:ButtonText;--utrecht-form-toggle-thumb-disabled-background-color:GrayText;border-color:var(--utrecht-form-toggle-track-disabled-border-color,var(--utrecht-form-toggle-track-border-color));border-width:min(var(--utrecht-form-toggle-border-width,1px),1px)}}.utrecht-form-toggle--focus-visible,.utrecht-form-toggle--html-div:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);z-index:1}.utrecht-form-toggle--hover{background-color:var(--utrecht-form-toggle-hover-background-color,var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color,var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled,.utrecht-form-toggle--html-div:disabled{border-color:var(--utrecht-form-toggle-disabled-border-color,var(--utrecht-form-toggle-border-color,currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style,var(--utrecht-form-toggle-border-style,solid));border-width:var(--utrecht-form-toggle-disabled-border-width,var(--utrecht-form-toggle-border-width,1px));cursor:var(--utrecht-action-disabled-cursor,not-allowed)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color,currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius,50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end,0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start,0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size,1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size,1.5em);z-index:20}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--checked{margin-inline-start:auto}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--not-checked{margin-inline-end:auto}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--disabled{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color,#aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow,0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);block-size:100%;border-radius:var(--utrecht-form-toggle-track-border-radius,var(--utrecht-form-toggle-border-radius));display:flex;inline-size:100%}.utrecht-form-toggle__track--html-label{cursor:inherit}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track,.utrecht-form-toggle__track--checked{background-color:var(--utrecht-form-toggle-checked-accent-color,var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track,.utrecht-form-toggle__track--disabled{background-color:var(--utrecht-form-toggle-disabled-background-color,#ddd);color:var(--utrecht-form-toggle-disabled-color,#000)}.utrecht-form-toggle__track--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);z-index:1}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{block-size:1px!important;border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;inline-size:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible~.utrecht-form-toggle__track{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);z-index:1}";
package/dist/tokens.d.mts ADDED
@@ -0,0 +1,4 @@
1
+
2
+ declare const tokens: any;
3
+
4
+ export default tokens;
package/dist/tokens.mjs ADDED
@@ -0,0 +1,372 @@
1
+ export default {
2
+ "utrecht": {
3
+ "form-toggle": {
4
+ "accent-color": {
5
+ "$extensions": {
6
+ "nl.nldesignsystem.css.property": {
7
+ "syntax": "<color>",
8
+ "inherits": true
9
+ },
10
+ "nl.nldesignsystem.figma.supports-token": false
11
+ },
12
+ "type": "color"
13
+ },
14
+ "background-color": {
15
+ "$extensions": {
16
+ "nl.nldesignsystem.css.property": {
17
+ "syntax": "<color>",
18
+ "inherits": true
19
+ },
20
+ "nl.nldesignsystem.figma.supports-token": false
21
+ },
22
+ "type": "color"
23
+ },
24
+ "border-color": {
25
+ "$extensions": {
26
+ "nl.nldesignsystem.css.property": {
27
+ "syntax": "<color>",
28
+ "inherits": true
29
+ },
30
+ "nl.nldesignsystem.figma.supports-token": false
31
+ },
32
+ "type": "color"
33
+ },
34
+ "border-style": {
35
+ "$extensions": {
36
+ "nl.nldesignsystem.css.property": {
37
+ "syntax": "*",
38
+ "inherits": true
39
+ },
40
+ "nl.nldesignsystem.figma.supports-token": false
41
+ },
42
+ "type": "other"
43
+ },
44
+ "border-radius": {
45
+ "$extensions": {
46
+ "nl.nldesignsystem.css.property": {
47
+ "syntax": "<length-percentage>",
48
+ "inherits": true
49
+ },
50
+ "nl.nldesignsystem.figma.supports-token": false
51
+ },
52
+ "type": "borderRadius"
53
+ },
54
+ "border-width": {
55
+ "$extensions": {
56
+ "nl.nldesignsystem.css.property": {
57
+ "syntax": "<length>",
58
+ "inherits": true
59
+ },
60
+ "nl.nldesignsystem.figma.supports-token": false
61
+ },
62
+ "type": "borderWidth"
63
+ },
64
+ "color": {
65
+ "$extensions": {
66
+ "nl.nldesignsystem.css.property": {
67
+ "syntax": "<color>",
68
+ "inherits": true
69
+ },
70
+ "nl.nldesignsystem.figma.supports-token": false
71
+ },
72
+ "type": "color"
73
+ },
74
+ "height": {
75
+ "$extensions": {
76
+ "nl.nldesignsystem.css.property": {
77
+ "syntax": "<length>",
78
+ "inherits": true
79
+ },
80
+ "nl.nldesignsystem.figma.supports-token": false
81
+ },
82
+ "type": "sizing"
83
+ },
84
+ "padding-inline-end": {
85
+ "$extensions": {
86
+ "nl.nldesignsystem.css.property": {
87
+ "syntax": "<length>",
88
+ "inherits": true
89
+ },
90
+ "nl.nldesignsystem.figma.supports-token": false
91
+ },
92
+ "type": "spacing"
93
+ },
94
+ "padding-inline-start": {
95
+ "$extensions": {
96
+ "nl.nldesignsystem.css.property": {
97
+ "syntax": "<length>",
98
+ "inherits": true
99
+ },
100
+ "nl.nldesignsystem.figma.supports-token": false
101
+ },
102
+ "type": "spacing"
103
+ },
104
+ "padding-block-end": {
105
+ "$extensions": {
106
+ "nl.nldesignsystem.css.property": {
107
+ "syntax": "<length>",
108
+ "inherits": true
109
+ },
110
+ "nl.nldesignsystem.figma.supports-token": false
111
+ },
112
+ "type": "spacing"
113
+ },
114
+ "padding-block-start": {
115
+ "$extensions": {
116
+ "nl.nldesignsystem.css.property": {
117
+ "syntax": "<length>",
118
+ "inherits": true
119
+ },
120
+ "nl.nldesignsystem.figma.supports-token": false
121
+ },
122
+ "type": "spacing"
123
+ },
124
+ "width": {
125
+ "$extensions": {
126
+ "nl.nldesignsystem.css.property": {
127
+ "syntax": "<length>",
128
+ "inherits": true
129
+ },
130
+ "nl.nldesignsystem.figma.supports-token": false
131
+ },
132
+ "type": "sizing"
133
+ },
134
+ "track": {
135
+ "border-color": {
136
+ "$extensions": {
137
+ "nl.nldesignsystem.css.property": {
138
+ "syntax": "<color>",
139
+ "inherits": true
140
+ },
141
+ "nl.nldesignsystem.figma.supports-token": false
142
+ },
143
+ "type": "color"
144
+ },
145
+ "border-radius": {
146
+ "$extensions": {
147
+ "nl.nldesignsystem.css.property": {
148
+ "syntax": "<length-percentage>",
149
+ "inherits": true
150
+ },
151
+ "nl.nldesignsystem.figma.supports-token": false
152
+ },
153
+ "type": "borderRadius"
154
+ },
155
+ "disabled": {
156
+ "background-color": {
157
+ "$extensions": {
158
+ "nl.nldesignsystem.css.property": {
159
+ "syntax": "<color>",
160
+ "inherits": true
161
+ },
162
+ "nl.nldesignsystem.figma.supports-token": false
163
+ },
164
+ "type": "color"
165
+ },
166
+ "border-color": {
167
+ "$extensions": {
168
+ "nl.nldesignsystem.css.property": {
169
+ "syntax": "<color>",
170
+ "inherits": true
171
+ },
172
+ "nl.nldesignsystem.figma.supports-token": false
173
+ },
174
+ "type": "color"
175
+ }
176
+ }
177
+ },
178
+ "thumb": {
179
+ "background-color": {
180
+ "$extensions": {
181
+ "nl.nldesignsystem.css.property": {
182
+ "syntax": "<color>",
183
+ "inherits": true
184
+ },
185
+ "nl.nldesignsystem.figma.supports-token": false
186
+ },
187
+ "type": "color"
188
+ },
189
+ "border-radius": {
190
+ "$extensions": {
191
+ "nl.nldesignsystem.css.property": {
192
+ "syntax": "<length-percentage>",
193
+ "inherits": true
194
+ },
195
+ "nl.nldesignsystem.figma.supports-token": false
196
+ },
197
+ "type": "borderRadius"
198
+ },
199
+ "box-shadow": {
200
+ "$extensions": {
201
+ "nl.nldesignsystem.css.property": {
202
+ "syntax": "*",
203
+ "inherits": true
204
+ },
205
+ "nl.nldesignsystem.figma.supports-token": false
206
+ },
207
+ "type": "boxShadow"
208
+ },
209
+ "margin-inline-start": {
210
+ "$extensions": {
211
+ "nl.nldesignsystem.css.property": {
212
+ "syntax": "<length>",
213
+ "inherits": true
214
+ },
215
+ "nl.nldesignsystem.figma.supports-token": false
216
+ },
217
+ "type": "spacing"
218
+ },
219
+ "margin-inline-end": {
220
+ "$extensions": {
221
+ "nl.nldesignsystem.css.property": {
222
+ "syntax": "<length>",
223
+ "inherits": true
224
+ },
225
+ "nl.nldesignsystem.figma.supports-token": false
226
+ },
227
+ "type": "spacing"
228
+ },
229
+ "min-inline-size": {
230
+ "$extensions": {
231
+ "nl.nldesignsystem.css.property": {
232
+ "syntax": "<length>",
233
+ "inherits": true
234
+ },
235
+ "nl.nldesignsystem.figma.supports-token": false
236
+ },
237
+ "type": "sizing"
238
+ },
239
+ "disabled": {
240
+ "box-shadow": {
241
+ "$extensions": {
242
+ "nl.nldesignsystem.css.property": {
243
+ "syntax": "*",
244
+ "inherits": true
245
+ },
246
+ "nl.nldesignsystem.figma.supports-token": false
247
+ },
248
+ "type": "boxShadow"
249
+ },
250
+ "background-color": {
251
+ "$extensions": {
252
+ "nl.nldesignsystem.css.property": {
253
+ "syntax": "<color>",
254
+ "inherits": true
255
+ },
256
+ "nl.nldesignsystem.figma.supports-token": false
257
+ },
258
+ "type": "color"
259
+ }
260
+ }
261
+ },
262
+ "checked": {
263
+ "accent-color": {
264
+ "$extensions": {
265
+ "nl.nldesignsystem.css.property": {
266
+ "syntax": "<color>",
267
+ "inherits": true
268
+ },
269
+ "nl.nldesignsystem.figma.supports-token": false
270
+ },
271
+ "type": "color"
272
+ }
273
+ },
274
+ "disabled": {
275
+ "border-color": {
276
+ "$extensions": {
277
+ "nl.nldesignsystem.css.property": {
278
+ "syntax": "<color>",
279
+ "inherits": true
280
+ },
281
+ "nl.nldesignsystem.figma.supports-token": false
282
+ },
283
+ "type": "color"
284
+ },
285
+ "border-style": {
286
+ "$extensions": {
287
+ "nl.nldesignsystem.css.property": {
288
+ "syntax": "*",
289
+ "inherits": true
290
+ },
291
+ "nl.nldesignsystem.figma.supports-token": false
292
+ },
293
+ "type": "other"
294
+ },
295
+ "border-width": {
296
+ "$extensions": {
297
+ "nl.nldesignsystem.css.property": {
298
+ "syntax": "<length>",
299
+ "inherits": true
300
+ },
301
+ "nl.nldesignsystem.figma.supports-token": false
302
+ },
303
+ "type": "borderWidth"
304
+ },
305
+ "color": {
306
+ "$extensions": {
307
+ "nl.nldesignsystem.css.property": {
308
+ "syntax": "<color>",
309
+ "inherits": true
310
+ },
311
+ "nl.nldesignsystem.figma.supports-token": false
312
+ },
313
+ "type": "color"
314
+ }
315
+ },
316
+ "focus": {
317
+ "border-color": {
318
+ "$extensions": {
319
+ "nl.nldesignsystem.css.property": {
320
+ "syntax": "<color>",
321
+ "inherits": true
322
+ },
323
+ "nl.nldesignsystem.figma.supports-token": false
324
+ },
325
+ "type": "color"
326
+ },
327
+ "border-style": {
328
+ "$extensions": {
329
+ "nl.nldesignsystem.css.property": {
330
+ "syntax": "*",
331
+ "inherits": true
332
+ },
333
+ "nl.nldesignsystem.figma.supports-token": false
334
+ },
335
+ "type": "other"
336
+ },
337
+ "border-width": {
338
+ "$extensions": {
339
+ "nl.nldesignsystem.css.property": {
340
+ "syntax": "<length>",
341
+ "inherits": true
342
+ },
343
+ "nl.nldesignsystem.figma.supports-token": false
344
+ },
345
+ "type": "borderWidth"
346
+ }
347
+ },
348
+ "hover": {
349
+ "background-color": {
350
+ "$extensions": {
351
+ "nl.nldesignsystem.css.property": {
352
+ "syntax": "<color>",
353
+ "inherits": true
354
+ },
355
+ "nl.nldesignsystem.figma.supports-token": false
356
+ },
357
+ "type": "color"
358
+ },
359
+ "color": {
360
+ "$extensions": {
361
+ "nl.nldesignsystem.css.property": {
362
+ "syntax": "<color>",
363
+ "inherits": true
364
+ },
365
+ "nl.nldesignsystem.figma.supports-token": false
366
+ },
367
+ "type": "color"
368
+ }
369
+ }
370
+ }
371
+ }
372
+ };
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.3.0",
2
+ "version": "1.5.0",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Form toggle component for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -12,7 +12,7 @@
12
12
  ],
13
13
  "main": "dist/index.css",
14
14
  "devDependencies": {
15
- "@utrecht/focus-ring-css": "2.1.0",
15
+ "@utrecht/focus-ring-css": "2.3.0",
16
16
  "@utrecht/build-utils-css": "0.0.1"
17
17
  },
18
18
  "keywords": [
package/src/tokens.json CHANGED
@@ -87,7 +87,7 @@
87
87
  "syntax": "<length>",
88
88
  "inherits": true
89
89
  },
90
- "nl.nldesignsystem.figma.supports-token": true
90
+ "nl.nldesignsystem.figma.supports-token": false
91
91
  },
92
92
  "type": "spacing"
93
93
  },
@@ -97,7 +97,7 @@
97
97
  "syntax": "<length>",
98
98
  "inherits": true
99
99
  },
100
- "nl.nldesignsystem.figma.supports-token": true
100
+ "nl.nldesignsystem.figma.supports-token": false
101
101
  },
102
102
  "type": "spacing"
103
103
  },
@@ -107,7 +107,7 @@
107
107
  "syntax": "<length>",
108
108
  "inherits": true
109
109
  },
110
- "nl.nldesignsystem.figma.supports-token": true
110
+ "nl.nldesignsystem.figma.supports-token": false
111
111
  },
112
112
  "type": "spacing"
113
113
  },
@@ -117,7 +117,7 @@
117
117
  "syntax": "<length>",
118
118
  "inherits": true
119
119
  },
120
- "nl.nldesignsystem.figma.supports-token": true
120
+ "nl.nldesignsystem.figma.supports-token": false
121
121
  },
122
122
  "type": "spacing"
123
123
  },