@digdir/designsystemet-css 0.10.0-alpha.1 → 0.10.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 (79) hide show
  1. package/accordion.css +46 -59
  2. package/alert.css +33 -37
  3. package/box.css +19 -19
  4. package/button.css +135 -91
  5. package/card.css +81 -103
  6. package/checkbox.css +58 -67
  7. package/chip.css +66 -66
  8. package/combobox.css +70 -83
  9. package/dist/accordion.css +1 -1
  10. package/dist/alert.css +1 -1
  11. package/dist/box.css +1 -1
  12. package/dist/button.css +1 -1
  13. package/dist/card.css +1 -1
  14. package/dist/checkbox.css +1 -1
  15. package/dist/chip.css +1 -1
  16. package/dist/combobox.css +1 -1
  17. package/dist/divider.css +1 -1
  18. package/dist/dropdownmenu.css +1 -1
  19. package/dist/error-message.css +1 -1
  20. package/dist/error-summary.css +1 -1
  21. package/dist/fieldset.css +1 -1
  22. package/dist/heading.css +1 -1
  23. package/dist/helptext.css +1 -1
  24. package/dist/index.css +1 -1
  25. package/dist/ingress.css +1 -1
  26. package/dist/label.css +1 -1
  27. package/dist/link.css +1 -1
  28. package/dist/list.css +1 -1
  29. package/dist/modal.css +1 -1
  30. package/dist/native-select.css +1 -1
  31. package/dist/pagination.css +1 -1
  32. package/dist/paragraph.css +1 -1
  33. package/dist/popover.css +1 -1
  34. package/dist/radio.css +1 -1
  35. package/dist/search.css +1 -1
  36. package/dist/skeleton.css +1 -1
  37. package/dist/skiplink.css +1 -1
  38. package/dist/spinner.css +1 -1
  39. package/dist/switch.css +1 -1
  40. package/dist/table.css +1 -1
  41. package/dist/tabs.css +1 -1
  42. package/dist/tag.css +1 -1
  43. package/dist/textarea.css +1 -1
  44. package/dist/textfield.css +1 -1
  45. package/dist/togglegroup.css +1 -1
  46. package/dist/tooltip.css +1 -1
  47. package/dist/utils.css +1 -1
  48. package/divider.css +4 -4
  49. package/dropdownmenu.css +11 -11
  50. package/error-message.css +12 -12
  51. package/error-summary.css +5 -9
  52. package/fieldset.css +4 -4
  53. package/heading.css +18 -18
  54. package/helptext.css +11 -12
  55. package/index.css +5 -5
  56. package/ingress.css +12 -12
  57. package/label.css +8 -8
  58. package/link.css +14 -14
  59. package/list.css +5 -5
  60. package/modal.css +20 -20
  61. package/native-select.css +31 -48
  62. package/package.json +2 -2
  63. package/pagination.css +19 -19
  64. package/paragraph.css +23 -23
  65. package/popover.css +27 -30
  66. package/radio.css +53 -47
  67. package/search.css +35 -40
  68. package/skeleton.css +5 -5
  69. package/skiplink.css +7 -31
  70. package/spinner.css +14 -6
  71. package/switch.css +49 -67
  72. package/table.css +27 -31
  73. package/tabs.css +28 -25
  74. package/tag.css +33 -33
  75. package/textarea.css +18 -18
  76. package/textfield.css +34 -36
  77. package/togglegroup.css +6 -7
  78. package/tooltip.css +16 -9
  79. package/utils.css +5 -5
package/dist/spinner.css CHANGED
@@ -1 +1 @@
1
- @layer ds.spinner{.fds-spinner{animation:fds-spinner-rotate-animation linear infinite;animation-duration:2s}.fds-spinner__circle{stroke-dasharray:1px,200px;animation:fds-spinner-stroke-animation ease-in-out infinite;animation-duration:2s;transform-origin:center}@media (prefers-reduced-motion:reduce){.fds-spinner,.fds-spinner__circle{animation-duration:6s}}.fds-spinner--neutral .fds-spinner__circle{stroke:var(--ds-color-neutral-border-default)}.fds-spinner--accent .fds-spinner__circle{stroke:var(--ds-color-accent-base-default)}.fds-spinner__background{stroke:var(--ds-color-neutral-surface-default)}@keyframes fds-spinner-rotate-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fds-spinner-stroke-animation{0%{stroke-dasharray:1px,200px;stroke-dashoffset:0}50%{stroke-dasharray:100px,200px;stroke-dashoffset:-15px;transform:rotate(0deg)}to{stroke-dasharray:1px,200px;stroke-dashoffset:-120px;transform:rotate(15deg)}}}
1
+ @layer fds.spinner{.fds-spinner{animation:fds-spinner-rotate-animation linear infinite;animation-duration:2s}.fds-spinner__circle{stroke-dasharray:1px,200px;animation:fds-spinner-stroke-animation ease-in-out infinite;animation-duration:2s;transform-origin:center}@media (prefers-reduced-motion:reduce){.fds-spinner,.fds-spinner__circle{animation-duration:6s}}.fds-spinner--default .fds-spinner__circle{stroke:var(--fds-semantic-border-neutral-default)}.fds-spinner--interaction .fds-spinner__circle{stroke:var(--fds-semantic-border-action-first-default)}.fds-spinner--inverted .fds-spinner__circle{stroke:var(--fds-semantic-surface-neutral-default)}.fds-spinner__background{stroke:var(--fds-semantic-border-neutral-subtle)}.fds-spinner__background--inverted{stroke:var(--fds-semantic-surface-neutral-dark)}@keyframes fds-spinner-rotate-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fds-spinner-stroke-animation{0%{stroke-dasharray:1px,200px;stroke-dashoffset:0}50%{stroke-dasharray:100px,200px;stroke-dashoffset:-15px;transform:rotate(0deg)}to{stroke-dasharray:1px,200px;stroke-dashoffset:-120px;transform:rotate(15deg)}}}
package/dist/switch.css CHANGED
@@ -1 +1 @@
1
- @layer ds.switch{.fds-switch{--dsc-switch--transition:200ms;--dsc-switch-height:1.75rem;--dsc-switch-focus-border-width:3px;--dsc-switch-check_color:transparent;--dsc-switch-thumb-background-color:var(--ds-color-neutral-background-default);position:relative}@media (prefers-reduced-motion){.switch{--dsc-switch--transition:0}}.fds-switch__label{align-items:center;cursor:pointer;display:grid;gap:var(--ds-spacing-1);grid-template-columns:auto 1fr;min-height:var(--ds-sizing-10);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-switch__track{background-color:var(--ds-color-neutral-border-default);border-radius:var(--ds-border-radius-full);display:inline-block;height:var(--dsc-switch-height);margin:auto;margin-right:var(--ds-spacing-1);overflow:visible;pointer-events:none;position:relative;transition:background-color var(--dsc-switch--transition) ease;width:var(--dsc-switch-width)}.fds-switch__description{color:var(--ds-color-neutral-text-subtle);margin-top:var(--ds-spacing-1);padding-left:calc(var(--dsc-switch-width) + var(--ds-spacing-2));width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fds-switch__readonly__icon{height:1.2em;width:1.2em}.fds-switch__label--right{grid-auto-flow:dense;grid-template-columns:1fr auto}.fds-switch__label--right .fds-switch__track{margin-right:0;order:1}.fds-switch__label--right+.fds-switch__description{padding-left:0}.fds-switch__input{cursor:pointer;height:2.75rem;margin:0;opacity:0;position:absolute;width:2.75rem;z-index:1}.fds-switch--readonly>.fds-switch__label{grid-template-columns:auto -webkit-min-content 1fr;grid-template-columns:auto min-content 1fr}.fds-switch--readonly>.fds-switch__label:where(.fds-switch__label--right){grid-template-columns:-webkit-min-content 1fr auto;grid-template-columns:min-content 1fr auto}.fds-switch--readonly>.fds-switch__input,.fds-switch--readonly>.fds-switch__label{cursor:default}.fds-switch--readonly>.fds-switch__description{margin-left:var(--ds-spacing-1)}.fds-switch--sm,.fds-switch--sm .fds-switch__label{min-height:var(--ds-sizing-6)}.fds-switch--md,.fds-switch--md .fds-switch__label{min-height:var(--ds-sizing-7)}.fds-switch--lg,.fds-switch--lg .fds-switch__label{min-height:var(--ds-sizing-8)}.fds-switch--sm{--dsc-switch-height:var(--ds-sizing-6);--dsc-switch-width:var(--ds-sizing-11)}.fds-switch--sm .fds-switch__input{left:-.25rem;top:-.25rem}.fds-switch--md{--dsc-switch-height:var(--ds-sizing-7);--dsc-switch-width:var(--ds-sizing-13)}.fds-switch--md .fds-switch__input{left:0;top:0}.fds-switch--lg{--dsc-switch-height:var(--ds-sizing-8);--dsc-switch-width:var(--ds-sizing-15)}.fds-switch--lg .fds-switch__input{left:0;top:.25rem}.fds-switch__label:has(.fds-switch__track:only-child){grid-template-columns:auto}.fds-switch__label:has(.fds-switch__track:only-child) .fds-switch__track{margin-right:0}.fds-switch:has(.fds-switch__input:disabled)>.fds-switch__label,.fds-switch__input:disabled{cursor:not-allowed}.fds-switch:has(.fds-switch__input:disabled)>.fds-switch__description,.fds-switch:has(.fds-switch__input:disabled)>.fds-switch__label{opacity:var(--ds-disabled-opacity)}.fds-switch__input:focus-visible+.fds-switch__label .fds-switch__track{box-shadow:0 0 0 var(--dsc-switch-focus-border-width) var(--ds-focus-inner);outline:var(--dsc-switch-focus-border-width) solid var(--ds-focus-outer);outline-offset:var(--dsc-switch-focus-border-width)}.fds-switch__input:not([readonly]):checked+.fds-switch__label .fds-switch__track{background-color:var(--ds-color-accent-base-default)}.fds-switch__thumb{background-color:var(--dsc-switch-thumb-background-color);border-radius:var(--ds-border-radius-full);height:var(--dsc-switch-height);position:absolute;scale:.8;transition:transform var(--dsc-switch--transition) ease;width:var(--dsc-switch-height)}.fds-switch__input:checked+.fds-switch__label .fds-switch__track .fds-switch__thumb{--dsc-switch-check_color:var(--ds-color-accent-base-default);--dsc-switch-thumb-background-color:var(--ds-color-accent-contrast-default);transform:translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height))*1.2))}.fds-switch__thumb:after{background-color:var(--dsc-switch-check_color);content:"";height:100%;left:50%;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='-3 -3 17 17'%3E%3Cpath fill='%23118849' fill-rule='evenodd' d='M10.134 2.866a1.25 1.25 0 0 1 0 1.768l-4.25 4.25a1.25 1.25 0 0 1-1.768 0l-2.25-2.25a1.25 1.25 0 1 1 1.768-1.768L5 6.232l3.366-3.366a1.25 1.25 0 0 1 1.768 0' clip-rule='evenodd'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='-3 -3 17 17'%3E%3Cpath fill='%23118849' fill-rule='evenodd' d='M10.134 2.866a1.25 1.25 0 0 1 0 1.768l-4.25 4.25a1.25 1.25 0 0 1-1.768 0l-2.25-2.25a1.25 1.25 0 1 1 1.768-1.768L5 6.232l3.366-3.366a1.25 1.25 0 0 1 1.768 0' clip-rule='evenodd'/%3E%3C/svg%3E");position:absolute;top:50%;transform:translate(-50%,-50%);transition:background-color var(--dsc-switch--transition) ease;width:100%}.fds-switch--readonly .fds-switch__input[readonly]+.fds-switch__label .fds-switch__track{background-color:var(--ds-color-neutral-background-subtle);box-shadow:inset 0 0 0 2px var(--ds-color-neutral-border-subtle)}.fds-switch--readonly .fds-switch__input[readonly]+.fds-switch__label .fds-switch__track>.fds-switch__thumb{--dsc-switch-check_color:var(--ds-color-neutral-background-subtle);background-color:var(--ds-color-neutral-border-strong)}@media (hover:hover) and (pointer:fine){.fds-switch__input:not([readonly],:disabled):hover+.fds-switch__label .fds-switch__track>.fds-switch__thumb{transform:translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height))*.2))}.fds-switch__input:not([readonly],:disabled):hover+.fds-switch__label{color:var(--ds-color-accent-text-subtle)}.fds-switch__input:not(:disabled,[readonly]):checked:hover+.fds-switch__label .fds-switch__track>.fds-switch__thumb{--dsc-switch-check_color:var(--ds-color-accent-base-hover);transform:translateX(calc(var(--dsc-switch-width) - var(--dsc-switch-height)))}.fds-switch__input:not(:checked,:disabled,[readonly]):hover+.fds-switch__label .fds-switch__track{background-color:var(--ds-color-neutral-border-strong)}.fds-switch__input:not(:disabled,[readonly]):checked:hover+.fds-switch__label .fds-switch__track{background-color:var(--ds-color-accent-base-hover)}}}
1
+ @layer fds.switch{.fds-switch{--fds-switch--transition:200ms;--fds-switch-height:1.75rem;--fds-switch-focus-border-width:3px;position:relative}@media (prefers-reduced-motion){.switch{--fds-switch--transition:0}}.fds-switch__label{align-items:center;cursor:pointer;display:grid;gap:var(--fds-spacing-1);grid-template-columns:auto 1fr;min-height:var(--fds-sizing-10);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-switch__track{background-color:var(--fds-semantic-surface-neutral-dark);border-radius:var(--fds-border_radius-full);display:inline-block;height:var(--fds-switch-height);margin:auto;margin-right:var(--fds-spacing-1);overflow:visible;pointer-events:none;position:relative;transition:background-color var(--fds-switch--transition) ease;width:var(--fds-switch-width)}.fds-switch__description{color:var(--fds-semantic-text-neutral-subtle);margin-top:calc(var(--fds-spacing-2)*-1);padding-left:calc(var(--fds-switch-width) + var(--fds-spacing-2))}.fds-switch__readonly__icon{height:1.2em;width:1.2em}.fds-switch__label--right{grid-auto-flow:dense;grid-template-columns:1fr auto}.fds-switch__label--right .fds-switch__track{margin-right:0;order:1}.fds-switch__label--right+.fds-switch__description{padding-left:0}.fds-switch__input{cursor:pointer;height:2.75rem;margin:0;opacity:0;position:absolute;width:2.75rem;z-index:1}.fds-switch--readonly>.fds-switch__label{grid-template-columns:auto -webkit-min-content 1fr;grid-template-columns:auto min-content 1fr}.fds-switch--readonly>.fds-switch__label:where(.fds-switch__label--right){grid-template-columns:-webkit-min-content 1fr auto;grid-template-columns:min-content 1fr auto}.fds-switch--readonly>.fds-switch__input,.fds-switch--readonly>.fds-switch__label{cursor:default}.fds-switch--readonly>.fds-switch__description{margin-left:var(--fds-spacing-1)}.fds-switch--sm,.fds-switch--sm .fds-switch__label{min-height:var(--fds-sizing-6)}.fds-switch--md,.fds-switch--md .fds-switch__label{min-height:var(--fds-sizing-7)}.fds-switch--lg,.fds-switch--lg .fds-switch__label{min-height:var(--fds-sizing-8)}.fds-switch--sm{--fds-switch-height:var(--fds-sizing-6);--fds-switch-width:var(--fds-sizing-11)}.fds-switch--sm .fds-switch__input{left:-.25rem;top:-.25rem}.fds-switch--md{--fds-switch-height:var(--fds-sizing-7);--fds-switch-width:var(--fds-sizing-13)}.fds-switch--md .fds-switch__input{left:0;top:0}.fds-switch--lg{--fds-switch-height:var(--fds-sizing-8);--fds-switch-width:var(--fds-sizing-15)}.fds-switch--lg .fds-switch__input{left:0;top:.25rem}.fds-switch__label:has(.fds-switch__track:only-child){grid-template-columns:auto}.fds-switch__label:has(.fds-switch__track:only-child) .fds-switch__track{margin-right:0}.fds-switch:has(.fds-switch__input:disabled)>.fds-switch__label,.fds-switch__input:disabled{cursor:not-allowed}.fds-switch:has(.fds-switch__input:disabled)>.fds-switch__description,.fds-switch:has(.fds-switch__input:disabled)>.fds-switch__label{opacity:var(--fds-opacity-disabled)}.fds-switch__input:focus-visible+.fds-switch__label .fds-switch__track{box-shadow:inset 0 0 0 var(--fds-switch-focus-border-width) var(--fds-semantic-border-focus-boxshadow);outline:var(--fds-switch-focus-border-width) solid var(--fds-semantic-border-focus-outline)}.fds-switch__input:not([readonly]):checked+.fds-switch__label .fds-switch__track{background-color:var(--fds-semantic-surface-success-default)}.fds-switch__thumb{background-color:var(--fds-semantic-background-default);border-radius:var(--fds-border_radius-full);height:var(--fds-switch-height);position:absolute;scale:.8;transition:transform var(--fds-switch--transition) ease;width:var(--fds-switch-height)}.fds-switch__input:checked+.fds-switch__label .fds-switch__track .fds-switch__thumb{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='-3 -3 17 17'%3E%3Cpath fill='%23118849' fill-rule='evenodd' d='M10.134 2.866a1.25 1.25 0 0 1 0 1.768l-4.25 4.25a1.25 1.25 0 0 1-1.768 0l-2.25-2.25a1.25 1.25 0 1 1 1.768-1.768L5 6.232l3.366-3.366a1.25 1.25 0 0 1 1.768 0' clip-rule='evenodd'/%3E%3C/svg%3E");transform:translateX(calc((var(--fds-switch-width) - var(--fds-switch-height))*1.2))}.fds-switch--readonly .fds-switch__input[readonly]+.fds-switch__label .fds-switch__track{background-color:var(--fds-semantic-background-subtle);box-shadow:inset 0 0 0 2px var(--fds-semantic-border-neutral-subtle)}.fds-switch--readonly .fds-switch__input[readonly]+.fds-switch__label .fds-switch__track>.fds-switch__thumb{background-color:var(--fds-semantic-border-neutral-default)}.fds-switch--readonly .fds-switch__input[readonly]:checked+.fds-switch__label .fds-switch__track .fds-switch__thumb{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='-3 -3 17 17'%3E%3Cpath fill='%23f4f5f6' fill-rule='evenodd' d='M10.134 2.866a1.25 1.25 0 0 1 0 1.768l-4.25 4.25a1.25 1.25 0 0 1-1.768 0l-2.25-2.25a1.25 1.25 0 1 1 1.768-1.768L5 6.232l3.366-3.366a1.25 1.25 0 0 1 1.768 0' clip-rule='evenodd'/%3E%3C/svg%3E")}@media (hover:hover) and (pointer:fine){.fds-switch__input:not([readonly],:disabled):hover+.fds-switch__label .fds-switch__track>.fds-switch__thumb{transform:translateX(calc((var(--fds-switch-width) - var(--fds-switch-height))*.2))}.fds-switch__input:not([readonly],:disabled):hover+.fds-switch__label{color:var(--fds-semantic-border-input-hover)}.fds-switch__input:not(:disabled,[readonly]):checked:hover+.fds-switch__label .fds-switch__track>.fds-switch__thumb{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='-3 -3 17 17'%3E%3Cpath fill='%230c6536' fill-rule='evenodd' d='M10.134 2.866a1.25 1.25 0 0 1 0 1.768l-4.25 4.25a1.25 1.25 0 0 1-1.768 0l-2.25-2.25a1.25 1.25 0 1 1 1.768-1.768L5 6.232l3.366-3.366a1.25 1.25 0 0 1 1.768 0' clip-rule='evenodd'/%3E%3C/svg%3E");transform:translateX(calc(var(--fds-switch-width) - var(--fds-switch-height)))}.fds-switch__input:not(:checked,:disabled,[readonly]):hover+.fds-switch__label .fds-switch__track{background-color:var(--fds-semantic-surface-neutral-dark-hover)}.fds-switch__input:not(:disabled,[readonly]):checked:hover+.fds-switch__label .fds-switch__track{background-color:var(--fds-semantic-surface-success-hover)}}}
package/dist/table.css CHANGED
@@ -1 +1 @@
1
- @layer ds.table{.fds-table{--dsc-table-padding:0;--dsc-table-border-radius:var(--ds-border-radius-md);border-collapse:initial;border-spacing:0;color:var(--ds-color-neutral-text-default);position:relative;text-align:left}.fds-table--sticky-header{overflow:auto}.fds-table--border .fds-table__row:last-of-type td{border-bottom:0}.fds-table--sm{--dsc-table-padding:var(--ds-spacing-1) var(--ds-spacing-3)}.fds-table--md{--dsc-table-padding:var(--ds-spacing-2) var(--ds-spacing-3)}.fds-table--lg{--dsc-table-padding:var(--ds-spacing-3) var(--ds-spacing-3)}.fds-table__head{box-sizing:border-box;font:inherit;font-family:inherit;font-weight:500;z-index:0}.fds-table__head,.fds-table__header__cell{border-bottom:2px solid var(--ds-color-neutral-border-subtle);border-spacing:0}.fds-table__header__cell{background-color:var(--ds-color-neutral-background-default);font:inherit;font-family:inherit;padding:var(--dsc-table-padding)}.fds-table--sticky-header .fds-table__head .fds-table__header__cell{position:-webkit-sticky;position:sticky;top:0;z-index:1}.fds-table__header__cell--sortable{padding:0}.fds-table__header__cell--sortable button{align-items:center;background-color:initial;border:none;color:var(--ds-color-neutral-text-default);cursor:pointer;display:flex;font:inherit;font-family:inherit;gap:var(--ds-spacing-1);padding:var(--dsc-table-padding);position:relative;width:100%;z-index:2}.fds-table__header__cell--sorted button{background-color:var(--ds-color-neutral-background-subtle)}.fds-table__header__cell--sortable button:focus-visible{box-shadow:unset;outline-offset:-3px;z-index:3}.fds-table__header__cell--sortable button svg{font-size:1.2em}.fds-table__cell{background-color:var(--ds-color-neutral-background-default);border-bottom:1px solid var(--ds-color-neutral-border-subtle);padding:var(--dsc-table-padding)}.fds-table--zebra .fds-table__row{border-bottom:0}.fds-table--zebra tr:nth-child(2n):not(:hover) .fds-table__cell{background-color:var(--ds-color-neutral-background-subtle)}.fds-table--border{border:1px solid var(--ds-color-neutral-border-default);border-radius:var(--dsc-table-border-radius)}.fds-table--border .fds-table__head .fds-table__header__cell:first-of-type{border-top-left-radius:var(--dsc-table-border-radius);overflow:hidden}.fds-table--border .fds-table__head .fds-table__header__cell:last-of-type{border-top-right-radius:var(--dsc-table-border-radius);overflow:hidden}.fds-table--border .fds-table__row:last-of-type .fds-table__cell:first-of-type{border-bottom-left-radius:var(--dsc-table-border-radius);overflow:hidden}.fds-table--border .fds-table__row:last-of-type .fds-table__cell:last-of-type{border-bottom-right-radius:var(--dsc-table-border-radius);overflow:hidden}@media (hover:hover) and (pointer:fine){.fds-table__header__cell--sortable button:hover,.fds-table__row:hover .fds-table__cell{background-color:var(--ds-color-neutral-surface-default)}}}
1
+ @layer fds.table{.fds-table{border-collapse:initial;border-spacing:0;position:relative;text-align:left;--table-padding:0;--border-radius:var(--fds-border_radius-medium)}.fds-table--sticky-header{overflow:auto}.fds-table--border .fds-table__row:last-of-type td{border-bottom:0}.fds-table--sm{--table-padding:var(--fds-spacing-1) var(--fds-spacing-3)}.fds-table--md{--table-padding:var(--fds-spacing-2) var(--fds-spacing-3)}.fds-table--lg{--table-padding:var(--fds-spacing-3) var(--fds-spacing-3)}.fds-table__head{box-sizing:border-box;font:inherit;font-family:inherit;font-weight:500;z-index:0}.fds-table__head,.fds-table__header__cell{border-bottom:2px solid var(--fds-semantic-border-divider-default);border-spacing:0}.fds-table__header__cell{background-color:var(--fds-semantic-surface-neutral-default);font:inherit;font-family:inherit;padding:var(--table-padding)}.fds-table--sticky-header .fds-table__head .fds-table__header__cell{position:-webkit-sticky;position:sticky;top:0;z-index:1}.fds-table__header__cell--sortable{padding:0}.fds-table__header__cell--sortable button{align-items:center;background-color:initial;border:none;cursor:pointer;display:flex;font:inherit;font-family:inherit;gap:var(--fds-spacing-1);padding:var(--table-padding);position:relative;width:100%;z-index:2}.fds-table__header__cell--sorted button{background-color:var(--fds-semantic-surface-neutral-subtle)}.fds-table__header__cell--sortable button:focus{z-index:3}.fds-table__header__cell--sortable button svg{font-size:1.2em}.fds-table__cell{background-color:var(--fds-semantic-surface-neutral-default);border-bottom:1px solid var(--fds-semantic-border-divider-default);padding:var(--table-padding)}.fds-table--zebra .fds-table__row{border-bottom:0}.fds-table--zebra tr:nth-child(2n):not(:hover) .fds-table__cell{background-color:var(--fds-semantic-background-subtle)}.fds-table--border{border:1px solid var(--fds-semantic-border-neutral-default);border-radius:var(--border-radius)}.fds-table--border .fds-table__head .fds-table__header__cell:first-of-type{border-top-left-radius:var(--border-radius);overflow:hidden}.fds-table--border .fds-table__head .fds-table__header__cell:last-of-type{border-top-right-radius:var(--border-radius);overflow:hidden}.fds-table--border .fds-table__row:last-of-type .fds-table__cell:first-of-type{border-bottom-left-radius:var(--border-radius);overflow:hidden}.fds-table--border .fds-table__row:last-of-type .fds-table__cell:last-of-type{border-bottom-right-radius:var(--border-radius);overflow:hidden}@media (hover:hover) and (pointer:fine){.fds-table__header__cell--sortable button:hover,.fds-table__row:hover .fds-table__cell{background-color:var(--fds-semantic-surface-neutral-subtle-hover)}}}
package/dist/tabs.css CHANGED
@@ -1 +1 @@
1
- @layer ds.tabs{.fds-tabs__tab{--dsc-tabs__tab-bottom-border-color:transparent;align-items:center;background-color:initial;border:none;border-radius:0;box-sizing:border-box;color:var(--ds-color-neutral-text-subtle);cursor:pointer;display:flex;flex-direction:row;gap:var(--ds-spacing-1);justify-content:center;padding:var(--ds-spacing-2) var(--ds-spacing-3);position:relative;text-align:center}.fds-tabs__content{padding:var(--ds-spacing-5)}.fds-tabs--sm .fds-tabs__content,.fds-tabs--sm .fds-tabs__tab{font:var(--ds-typography-paragraph-short-sm)}.fds-tabs--md .fds-tabs__content,.fds-tabs--md .fds-tabs__tab{font:var(--ds-typography-paragraph-short-md)}.fds-tabs--lg .fds-tabs__content,.fds-tabs--lg .fds-tabs__tab{font:var(--ds-typography-paragraph-short-lg)}.fds-tabs--sm .fds-tabs__tab{padding:var(--ds-spacing-2) var(--ds-spacing-4)}.fds-tabs--md .fds-tabs__tab{padding:var(--ds-spacing-3) var(--ds-spacing-5)}.fds-tabs--lg .fds-tabs__tab{padding:var(--ds-spacing-4) var(--ds-spacing-6)}.fds-tabs--sm .fds-tabs__content{padding:var(--ds-spacing-4)}.fds-tabs--md .fds-tabs__content{padding:var(--ds-spacing-5)}.fds-tabs--lg .fds-tabs__content{padding:var(--ds-spacing-6)}@media (hover:hover) and (pointer:fine){.fds-tabs__tab:hover:not([aria-selected=true]){--dsc-tabs__tab-bottom-border-color:var(--ds-color-neutral-border-subtle);color:var(--ds-color-neutral-text-default)}}.fds-tabs__tab[aria-selected=true]{--dsc-tabs__tab-bottom-border-color:var(--ds-color-accent-base-default);color:var(--ds-color-accent-text-subtle)}.fds-tabs__tab:focus{z-index:2}.fds-tabs__tab:after{background-color:var(--dsc-tabs__tab-bottom-border-color);border-radius:var(--ds-border-radius-full);bottom:0;content:"";display:block;height:3px;left:0;position:absolute;width:100%}.fds-tabs__tablist{border-bottom:var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);display:flex;flex-direction:row;position:relative}}
1
+ @layer fds.tabs{.fds-tabs__tab{--fds-tabs__tab-bottom-border-color:transparent;align-items:center;background-color:initial;border:none;border-radius:0;box-sizing:border-box;color:var(--fds-semantic-text-neutral-subtle);cursor:pointer;display:flex;flex-direction:row;gap:var(--fds-spacing-1);justify-content:center;padding:var(--fds-spacing-2) var(--fds-spacing-3);position:relative;text-align:center}.fds-tabs__content{padding:var(--fds-spacing-5)}.fds-tabs--sm .fds-tabs__content,.fds-tabs--sm .fds-tabs__tab{font:var(--fds-typography-paragraph-short-small)}.fds-tabs--md .fds-tabs__content,.fds-tabs--md .fds-tabs__tab{font:var(--fds-typography-paragraph-short-medium)}.fds-tabs--lg .fds-tabs__content,.fds-tabs--lg .fds-tabs__tab{font:var(--fds-typography-paragraph-short-large)}.fds-tabs--sm .fds-tabs__tab{padding:var(--fds-spacing-2) var(--fds-spacing-4)}.fds-tabs--md .fds-tabs__tab{padding:var(--fds-spacing-3) var(--fds-spacing-5)}.fds-tabs--lg .fds-tabs__tab{padding:var(--fds-spacing-4) var(--fds-spacing-6)}.fds-tabs--sm .fds-tabs__content{padding:var(--fds-spacing-4)}.fds-tabs--md .fds-tabs__content{padding:var(--fds-spacing-5)}.fds-tabs--lg .fds-tabs__content{padding:var(--fds-spacing-6)}@media (hover:hover) and (pointer:fine){.fds-tabs__tab:hover:not([aria-selected=true]){--fds-tabs__tab-bottom-border-color:var(--fds-semantic-border-neutral-subtle);color:var(--fds-semantic-text-neutral-default)}}.fds-tabs__tab[aria-selected=true]{--fds-tabs__tab-bottom-border-color:var(--fds-semantic-border-action-default);color:var(--fds-semantic-text-action-default)}.fds-tabs__tab:focus-visible{--fds-tabs__tab-bottom-border-color:var(--fds-semantic-text-neutral-default);background:var(--fds-semantic-border-focus-outline);color:var(--fds-semantic-text-neutral-default);outline:none}.fds-tabs__tab:after{background-color:var(--fds-tabs__tab-bottom-border-color);border-radius:var(--fds-border_radius-full);bottom:0;content:"";display:block;height:3px;left:0;position:absolute;width:100%}.fds-tabs__tablist{border-bottom:var(--fds-border_width-default) solid var(--fds-semantic-border-neutral-subtle);display:flex;flex-direction:row}}
package/dist/tag.css CHANGED
@@ -1 +1 @@
1
- @layer ds.tag{.fds-tag{--dsc-tag-background:var(--ds-color-neutral-background-subtle);--dsc-tag-color:var(--ds-color-neutral-text-default);align-items:center;background-color:var(--dsc-tag-background);border-radius:var(--ds-border-radius-sm);box-sizing:border-box;color:var(--dsc-tag-color);display:flex;min-height:var(--ds-sizing-8);width:-webkit-max-content;width:-moz-max-content;width:max-content;word-break:break-word}.fds-tag,.fds-tag--sm{padding:0 var(--ds-spacing-2)}.fds-tag--sm{min-height:var(--ds-sizing-7)}.fds-tag--md{min-height:var(--ds-sizing-8);padding:0 var(--ds-spacing-2)}.fds-tag--lg{min-height:var(--ds-sizing-9);padding:0 var(--ds-spacing-3)}.fds-tag--neutral{--dsc-tag-background:var(--ds-color-neutral-surface-default);--dsc-tag-color:var(--ds-color-neutral-text-default)}.fds-tag--info{--dsc-tag-background:var(--ds-color-info-surface-default);--dsc-tag-color:var(--ds-color-info-text-default)}.fds-tag--success{--dsc-tag-background:var(--ds-color-success-surface-default);--dsc-tag-color:var(--ds-color-success-text-default)}.fds-tag--warning{--dsc-tag-background:var(--ds-color-warning-surface-default);--dsc-tag-color:var(--ds-color-warning-text-default)}.fds-tag--danger{--dsc-tag-background:var(--ds-color-danger-surface-default);--dsc-tag-color:var(--ds-color-danger-text-default)}.fds-tag--brand1{--dsc-tag-background:var(--ds-color-brand1-surface-default);--dsc-tag-color:var(--ds-color-brand1-text-default)}.fds-tag--brand2{--dsc-tag-background:var(--ds-color-brand2-surface-default);--dsc-tag-color:var(--ds-color-brand2-text-default)}.fds-tag--brand3{--dsc-tag-background:var(--ds-color-brand3-surface-default);--dsc-tag-color:var(--ds-color-brand3-text-default)}}
1
+ @layer fds.tag{.fds-tag{--fds-tag-background:var(--fds-semantic-surface-neutral-subtle);--fds-tag-color:var(--fds-semantic-text-neutral-default);align-items:center;background-color:var(--fds-tag-background);border-radius:var(--fds-border_radius-small);box-sizing:border-box;color:var(--fds-tag-color);display:flex;min-height:var(--fds-sizing-8);width:-webkit-max-content;width:-moz-max-content;width:max-content;word-break:break-word}.fds-tag,.fds-tag--sm{padding:0 var(--fds-spacing-2)}.fds-tag--sm{min-height:var(--fds-sizing-7)}.fds-tag--md{min-height:var(--fds-sizing-8);padding:0 var(--fds-spacing-2)}.fds-tag--lg{min-height:var(--fds-sizing-9);padding:0 var(--fds-spacing-3)}.fds-tag--neutral{--fds-tag-background:var(--fds-semantic-surface-neutral-subtle);--fds-tag-color:var(--fds-semantic-text-neutral-default)}.fds-tag--info{--fds-tag-background:var(--fds-semantic-surface-info-subtle);--fds-tag-color:var(--fds-semantic-text-neutral-default)}.fds-tag--success{--fds-tag-background:var(--fds-semantic-surface-success-subtle);--fds-tag-color:var(--fds-semantic-text-success-on_success_subtle)}.fds-tag--warning{--fds-tag-background:var(--fds-semantic-surface-warning-default);--fds-tag-color:var(--fds-semantic-text-neutral-default)}.fds-tag--danger{--fds-tag-background:var(--fds-semantic-surface-danger-subtle);--fds-tag-color:var(--fds-semantic-text-danger-on_danger_subtle)}.fds-tag--first{--fds-tag-background:var(--fds-semantic-surface-first-light);--fds-tag-color:var(--fds-semantic-text-neutral-default)}.fds-tag--second{--fds-tag-background:var(--fds-semantic-surface-second-light);--fds-tag-color:var(--fds-semantic-text-neutral-default)}.fds-tag--third{--fds-tag-background:var(--fds-semantic-surface-third-light);--fds-tag-color:var(--fds-semantic-text-neutral-default)}}
package/dist/textarea.css CHANGED
@@ -1 +1 @@
1
- @layer ds.textarea{.fds-textarea{display:grid;gap:var(--ds-spacing-2)}.fds-textarea__readonly-icon{height:1.2em;width:1.2em}.fds-textarea__error-message:empty{display:none}.fds-textarea__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--ds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textarea__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-spacing-2)*-1)}.fds-textarea__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--ds-color-neutral-border-default);border-radius:var(--ds-border-radius-md);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;min-height:2.5em;padding:var(--ds-spacing-3);position:relative;resize:vertical;width:100%}.fds-textarea--sm .fds-textarea__input{padding:var(--ds-spacing-2)}.fds-textarea--md .fds-textarea__input{padding:var(--ds-spacing-3)}.fds-textarea--lg .fds-textarea__input{padding:var(--ds-spacing-4)}.fds-textarea:has(.fds-textarea__input:disabled){opacity:var(--ds-disabled-opacity)}.fds-textarea__input:disabled{cursor:not-allowed}.fds-textarea__input:-moz-read-only{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.fds-textarea__input:read-only{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.fds-textarea--error>.fds-textarea__input:not(:focus-visible){border-color:var(--ds-color-danger-border-default);box-shadow:inset 0 0 0 1px var(--ds-color-danger-border-default)}@media (hover:hover) and (pointer:fine){.fds-textarea__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--ds-color-accent-border-strong);box-shadow:inset 0 0 0 1px var(--ds-color-accent-border-strong)}}}
1
+ @layer fds.textarea{.fds-textarea{display:grid;gap:var(--fds-spacing-2)}.fds-textarea__readonly-icon{height:1.2em;width:1.2em}.fds-textarea__error-message:empty{display:none}.fds-textarea__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--fds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textarea__description{color:var(--fds-semantic-text-neutral-subtle);margin-top:calc(var(--fds-spacing-2)*-1)}.fds-textarea__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--fds-semantic-border-input-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;min-height:2.5em;padding:var(--fds-spacing-3);position:relative;resize:vertical;width:100%}.fds-textarea--sm .fds-textarea__input{padding:var(--fds-spacing-2)}.fds-textarea--md .fds-textarea__input{padding:var(--fds-spacing-3)}.fds-textarea--lg .fds-textarea__input{padding:var(--fds-spacing-4)}.fds-textarea:has(.fds-textarea__input:disabled){opacity:var(--fds-opacity-disabled)}.fds-textarea__input:disabled{cursor:not-allowed}.fds-textarea__input:-moz-read-only{background:var(--fds-semantic-surface-neutral-subtle);border-color:var(--fds-semantic-border-neutral-default)}.fds-textarea__input:read-only{background:var(--fds-semantic-surface-neutral-subtle);border-color:var(--fds-semantic-border-neutral-default)}.fds-textarea--error>.fds-textarea__input:not(:focus-visible){border-color:var(--fds-semantic-border-danger-default);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-danger-default)}@media (hover:hover) and (pointer:fine){.fds-textarea__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--fds-semantic-border-input-hover);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-input-hover)}}}
@@ -1 +1 @@
1
- @layer ds.textfield{.fds-textfield{display:grid;gap:var(--ds-spacing-2)}.fds-textfield__adornment{background:var(--ds-color-neutral-background-subtle);border:1px solid var(--ds-color-neutral-border-strong);border-radius:var(--ds-border-radius-md);box-sizing:border-box;color:var(--ds-color-neutral-border-strong);display:inline-block;padding:9px var(--ds-spacing-4)}.fds-textfield__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--ds-color-neutral-background-default);border:1px solid var(--ds-color-neutral-border-default);border-radius:var(--ds-border-radius-md);box-sizing:border-box;color:var(--ds-color-neutral-text-default);flex:0 1 auto;font:inherit;font-family:inherit;padding:0 var(--ds-spacing-3);position:relative;width:100%}.fds-textfield__input:disabled{cursor:not-allowed}.fds-textfield--readonly .fds-textfield__input{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.fds-textfield__field{align-items:stretch;border-radius:var(--ds-border-radius-md);display:flex}.fds-textfield__field>:first-child{border-bottom-left-radius:var(--ds-border-radius-md);border-top-left-radius:var(--ds-border-radius-md)}.fds-textfield__field>:last-child{border-bottom-right-radius:var(--ds-border-radius-md);border-top-right-radius:var(--ds-border-radius-md)}.fds-textfield--sm .fds-textfield__adornment{padding:var(--ds-sizing-2) var(--ds-spacing-3)}.fds-textfield--md .fds-textfield__adornment{padding:.65rem var(--ds-spacing-4)}.fds-textfield--lg .fds-textfield__adornment{padding:.85rem var(--ds-spacing-5)}.fds-textfield--sm .fds-textfield__field{height:var(--ds-sizing-10)}.fds-textfield--md .fds-textfield__field{height:var(--ds-sizing-12)}.fds-textfield--lg .fds-textfield__field{height:var(--ds-sizing-14)}.fds-textfield--sm .fds-textfield__input{padding:0 var(--ds-spacing-2)}.fds-textfield--md .fds-textfield__input{padding:0 var(--ds-spacing-3)}.fds-textfield--lg .fds-textfield__input{padding:0 var(--ds-spacing-4)}.fds-textfield__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--ds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textfield__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-spacing-2)*-1)}.fds-textfield:has(.fds-textfield__input:disabled){opacity:var(--ds-disabled-opacity)}.fds-textfield--error .fds-textfield__input:not(:focus-visible){border-color:var(--ds-color-danger-border-default);box-shadow:inset 0 0 0 1px var(--ds-color-danger-border-default)}@media (hover:hover) and (pointer:fine){.fds-textfield__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--ds-color-accent-border-strong);box-shadow:inset 0 0 0 1px var(--ds-color-accent-border-strong)}}.fds-textfield__input--with-prefix{border-bottom-left-radius:0;border-top-left-radius:0}.fds-textfield__input--with-suffix{border-bottom-right-radius:0;border-top-right-radius:0}.fds-textfield__prefix{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0}.fds-textfield__suffix{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.fds-textfield__readonly__icon{height:1.2em;width:1.2em}.fds-textfield__error-message:empty{display:none}}
1
+ @layer fds.textfield{.fds-textfield{display:grid;gap:var(--fds-spacing-2)}.fds-textfield__adornment{background:var(--fds-semantic-surface-neutral-subtle);border:1px solid var(--fds-semantic-border-neutral-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;color:var(--fds-semantic-border-neutral-default);display:inline-block;padding:9px var(--fds-spacing-4)}.fds-textfield__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--fds-semantic-border-input-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;padding:0 var(--fds-spacing-3);position:relative;width:100%}.fds-textfield__input:disabled{cursor:not-allowed}.fds-textfield--readonly .fds-textfield__input{background:var(--fds-semantic-surface-neutral-subtle);border-color:var(--fds-semantic-border-neutral-default)}.fds-textfield__field{align-items:stretch;border-radius:var(--fds-border_radius-medium);display:flex}.fds-textfield__field>:first-child{border-bottom-left-radius:var(--fds-border_radius-medium);border-top-left-radius:var(--fds-border_radius-medium)}.fds-textfield__field>:last-child{border-bottom-right-radius:var(--fds-border_radius-medium);border-top-right-radius:var(--fds-border_radius-medium)}.fds-textfield--sm .fds-textfield__adornment{padding:var(--fds-sizing-2) var(--fds-spacing-3)}.fds-textfield--md .fds-textfield__adornment{padding:.65rem var(--fds-spacing-4)}.fds-textfield--lg .fds-textfield__adornment{padding:.85rem var(--fds-spacing-5)}.fds-textfield--sm .fds-textfield__field{height:var(--fds-sizing-10)}.fds-textfield--md .fds-textfield__field{height:var(--fds-sizing-12)}.fds-textfield--lg .fds-textfield__field{height:var(--fds-sizing-14)}.fds-textfield--sm .fds-textfield__input{padding:0 var(--fds-spacing-2)}.fds-textfield--md .fds-textfield__input{padding:0 var(--fds-spacing-3)}.fds-textfield--lg .fds-textfield__input{padding:0 var(--fds-spacing-4)}.fds-textfield__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--fds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textfield__description{color:var(--fds-semantic-text-neutral-subtle);margin-top:calc(var(--fds-spacing-2)*-1)}.fds-textfield:has(.fds-textfield__input:disabled){opacity:var(--fds-opacity-disabled)}.fds-textfield--error .fds-textfield__input:not(:focus-visible){border-color:var(--fds-semantic-border-danger-default);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-danger-default)}@media (hover:hover) and (pointer:fine){.fds-textfield__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--fds-semantic-border-input-hover);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-input-hover)}}.fds-textfield__input--with-prefix{border-bottom-left-radius:0;border-top-left-radius:0}.fds-textfield__input--with-suffix{border-bottom-right-radius:0;border-top-right-radius:0}.fds-textfield__prefix{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0}.fds-textfield__suffix{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.fds-textfield__readonly__icon{height:1.2em;width:1.2em}.fds-textfield__error-message:empty{display:none}}
@@ -1 +1 @@
1
- @layer ds.togglegroup{.fds-togglegroup{background-color:var(--ds-color-neutral-background-default);border:var(--ds-color-neutral-border-default) solid var(--ds-border-width-default);border-radius:var(--ds-border-radius-lg);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fds-togglegroup__content{display:inline-grid;gap:var(--ds-spacing-1);grid-auto-columns:1fr;grid-auto-flow:column;padding:var(--ds-spacing-1)}.fds-togglegroup__input{display:none}.fds-togglegroup__item:focus-visible{z-index:1}}
1
+ @layer fds.togglegroup{.fds-togglegroup{background-color:var(--fds-semantic-background-default);border:var(--fds-semantic-border-neutral-default) solid var(--fds-border_width-default);border-radius:var(--fds-border_radius-large);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fds-togglegroup__content{display:inline-grid;gap:var(--fds-spacing-1);grid-auto-columns:1fr;grid-auto-flow:column;padding:var(--fds-spacing-1)}.fds-togglegroup__input{display:none}.fds-togglegroup__item:focus-visible{z-index:1}}
package/dist/tooltip.css CHANGED
@@ -1 +1 @@
1
- @layer ds.tooltip{.fds-tooltip{--dsc-tooltip-background:var(--ds-color-neutral-text-default);background:var(--dsc-tooltip-background);border-radius:var(--ds-border-radius-md);color:var(--ds-color-neutral-background-default);font:var(--ds-typography-paragraph-xs);font-family:inherit;padding:var(--ds-spacing-1) var(--ds-spacing-2)}.fds-tooltip__arrow{fill:var(--dsc-tooltip-background)}}
1
+ @layer fds.tooltip{.fds-tooltip{background:var(--fds-semantic-surface-neutral-inverted);border-radius:var(--fds-border_radius-medium);color:var(--fds-semantic-text-neutral-on_inverted);font:var(--fds-typography-paragraph-xsmall);font-family:inherit;padding:var(--fds-spacing-1) var(--fds-spacing-2)}.fds-tooltip--inverted{background:var(--fds-semantic-surface-neutral-subtle);color:var(--fds-semantic-text-neutral-default)}.fds-tooltip__arrow{fill:var(--fds-semantic-surface-neutral-inverted)}.fds-tooltip--inverted .fds-tooltip__arrow{fill:var(--fds-semantic-surface-neutral-subtle)}}
package/dist/utils.css CHANGED
@@ -1 +1 @@
1
- @layer ds.utils{.fds-sr-only{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.fds-focus:focus-visible{--dsc-focus-border-width:3px;box-shadow:0 0 0 var(--dsc-focus-border-width) var(--ds-focus-inner);outline:var(--dsc-focus-border-width) solid var(--ds-focus-outer);outline-offset:var(--dsc-focus-border-width)}@layer animate-height{.fds-animate-height--closed,.fds-animate-height--openingOrClosing{overflow:hidden}.fds-animate-height--open .fds-animate-height__content{height:auto}.fds-animate-height--closed .fds-animate-height__content{display:none;height:0}}}
1
+ @layer fds.utils{.fds-sr-only{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.fds-focus:focus-visible{--fds-focus-border-width:3px;box-shadow:0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);outline:var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);outline-offset:var(--fds-focus-border-width)}@layer animate-height{.fds-animate-height--closed,.fds-animate-height--openingOrClosing{overflow:hidden}.fds-animate-height--open .fds-animate-height__content{height:auto}.fds-animate-height--closed .fds-animate-height__content{display:none;height:0}}}
package/divider.css CHANGED
@@ -1,18 +1,18 @@
1
- @layer ds.divider {
1
+ @layer fds.divider {
2
2
  .fds-divider {
3
3
  border: none;
4
4
  border-top: 1px solid;
5
5
  }
6
6
 
7
7
  .fds-divider--default {
8
- border-color: var(--ds-color-neutral-border-subtle);
8
+ border-color: var(--fds-semantic-border-divider-default);
9
9
  }
10
10
 
11
11
  .fds-divider--strong {
12
- border-color: var(--ds-color-neutral-border-default);
12
+ border-color: var(--fds-semantic-border-divider-strong);
13
13
  }
14
14
 
15
15
  .fds-divider--subtle {
16
- border-color: var(--ds-color-neutral-border-subtle);
16
+ border-color: var(--fds-semantic-border-divider-subtle);
17
17
  }
18
18
  }
package/dropdownmenu.css CHANGED
@@ -1,37 +1,37 @@
1
- @layer ds.dropdownmenu {
1
+ @layer fds.dropdownmenu {
2
2
  .fds-dropdownmenu {
3
3
  position: relative;
4
- padding: var(--ds-spacing-2);
4
+ padding: var(--fds-spacing-2);
5
5
  z-index: 1500;
6
6
  margin: 0;
7
7
  list-style: none;
8
- border-radius: var(--ds-border-radius-md);
9
- box-shadow: var(--ds-shadow-md);
10
- background-color: var(--ds-color-neutral-background-default);
8
+ border-radius: var(--fds-border_radius-medium);
9
+ box-shadow: var(--fds-shadow-medium);
10
+ background-color: var(--fds-semantic-background-default);
11
11
  }
12
12
 
13
13
  .fds-dropdownmenu--sm {
14
14
  min-width: 240px;
15
- padding: var(--ds-spacing-2);
15
+ padding: var(--fds-spacing-2);
16
16
  }
17
17
 
18
18
  .fds-dropdownmenu--md {
19
19
  min-width: 260px;
20
- padding: var(--ds-spacing-3) var(--ds-spacing-2);
20
+ padding: var(--fds-spacing-3) var(--fds-spacing-2);
21
21
  }
22
22
 
23
23
  .fds-dropdownmenu--lg {
24
24
  min-width: 280px;
25
- padding: var(--ds-spacing-4) var(--ds-spacing-2);
25
+ padding: var(--fds-spacing-4) var(--fds-spacing-2);
26
26
  }
27
27
 
28
28
  .fds-dropdownmenu > hr {
29
- border-color: var(--ds-color-neutral-border-subtle) !important;
29
+ border-color: var(--fds-semantic-border-divider-subtle) !important;
30
30
  }
31
31
 
32
32
  .fds-dropdownmenu__item {
33
33
  justify-content: start;
34
- padding: 0 var(--ds-spacing-4);
34
+ padding: 0 var(--fds-spacing-4);
35
35
  }
36
36
 
37
37
  .fds-dropdownmenu__section {
@@ -41,6 +41,6 @@
41
41
  }
42
42
 
43
43
  .fds-dropdownmenu__heading {
44
- padding: var(--ds-spacing-2) var(--ds-spacing-4);
44
+ padding: var(--fds-spacing-2) var(--fds-spacing-4);
45
45
  }
46
46
  }
package/error-message.css CHANGED
@@ -1,43 +1,43 @@
1
- @layer ds.typography.error-message {
1
+ @layer fds.typography.error-message {
2
2
  .fds-error-message {
3
- --dsc-bottom-spacing: var(--ds-spacing-5);
3
+ --fdsc-bottom-spacing: var(--fds-spacing-5);
4
4
 
5
5
  margin: 0;
6
6
  }
7
7
 
8
8
  .fds-error-message--error {
9
- color: var(--ds-color-danger-text-default);
9
+ color: var(--fds-semantic-text-danger-default);
10
10
  }
11
11
 
12
12
  .fds-error-message--spacing {
13
- margin-bottom: var(--dsc-bottom-spacing);
13
+ margin-bottom: var(--fdsc-bottom-spacing);
14
14
  }
15
15
 
16
16
  .fds-error-message--lg {
17
- --dsc-bottom-spacing: var(--ds-spacing-5);
17
+ --fdsc-bottom-spacing: var(--fds-spacing-5);
18
18
 
19
- font: var(--ds-typography-error_message-lg);
19
+ font: var(--fds-typography-error_message-large);
20
20
  font-family: inherit;
21
21
  }
22
22
 
23
23
  .fds-error-message--md {
24
- --dsc-bottom-spacing: var(--ds-spacing-5);
24
+ --fdsc-bottom-spacing: var(--fds-spacing-5);
25
25
 
26
- font: var(--ds-typography-error_message-md);
26
+ font: var(--fds-typography-error_message-medium);
27
27
  font-family: inherit;
28
28
  }
29
29
 
30
30
  .fds-error-message--sm {
31
- --dsc-bottom-spacing: var(--ds-spacing-4);
31
+ --fdsc-bottom-spacing: var(--fds-spacing-4);
32
32
 
33
- font: var(--ds-typography-error_message-sm);
33
+ font: var(--fds-typography-error_message-small);
34
34
  font-family: inherit;
35
35
  }
36
36
 
37
37
  .fds-error-message--xs {
38
- --dsc-bottom-spacing: var(--ds-spacing-3);
38
+ --fdsc-bottom-spacing: var(--fds-spacing-3);
39
39
 
40
- font: var(--ds-typography-error_message-xs);
40
+ font: var(--fds-typography-error_message-xsmall);
41
41
  font-family: inherit;
42
42
  }
43
43
  }
package/error-summary.css CHANGED
@@ -1,19 +1,15 @@
1
- @layer ds.errorsummary {
1
+ @layer fds.errorsummary {
2
2
  .fds-error-summary {
3
- padding: var(--ds-spacing-6) var(--ds-spacing-8);
4
- border-radius: var(--ds-border-radius-lg);
5
- background-color: var(--ds-color-danger-surface-default);
3
+ padding: var(--fds-spacing-6) var(--fds-spacing-8);
4
+ border-radius: var(--fds-border_radius-large);
5
+ background-color: var(--fds-semantic-surface-danger-subtle);
6
6
  }
7
7
 
8
8
  .fds-error-summary a {
9
- color: var(--ds-color-neutral-text-default);
9
+ color: var(--fds-semantic-text-neutral-default);
10
10
  }
11
11
 
12
12
  .fds-error-summary li:last-of-type {
13
13
  margin-bottom: 0;
14
14
  }
15
-
16
- .fds-error-summary__heading {
17
- color: var(--ds-color-danger-text-default);
18
- }
19
15
  }
package/fieldset.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer ds.fieldset {
1
+ @layer fds.fieldset {
2
2
  .fds-fieldset {
3
3
  margin: 0;
4
4
  padding: 0;
@@ -9,11 +9,11 @@
9
9
  .fds-fieldset--spacing {
10
10
  display: flex;
11
11
  flex-direction: column;
12
- gap: var(--ds-spacing-2);
12
+ gap: var(--fds-spacing-2);
13
13
  }
14
14
 
15
15
  .fds-fieldset__description {
16
- color: var(--ds-color-neutral-text-subtle);
16
+ color: var(--fds-semantic-text-neutral-subtle);
17
17
  font-weight: 400;
18
18
  }
19
19
 
@@ -32,7 +32,7 @@
32
32
 
33
33
  .fds-fieldset:disabled .fds-fieldset__legend,
34
34
  .fds-fieldset:disabled .fds-fieldset__description {
35
- color: var(--ds-color-neutral-border-subtle);
35
+ color: var(--fds-semantic-border-neutral-subtle);
36
36
  }
37
37
 
38
38
  .fds-fieldset__error-message {
package/heading.css CHANGED
@@ -1,61 +1,61 @@
1
- @layer ds.typography.heading {
1
+ @layer fds.typography.heading {
2
2
  .fds-heading {
3
- --dsc-bottom-spacing: var(--ds-spacing-6);
3
+ --fdsc-bottom-spacing: var(--fds-spacing-6);
4
4
 
5
5
  margin: 0;
6
- color: var(--ds-color-neutral-text-default);
6
+ color: var(--fds-semantic-text-neutral-default);
7
7
  }
8
8
 
9
9
  .fds-heading--spacing {
10
- margin-bottom: var(--dsc-bottom-spacing);
10
+ margin-bottom: var(--fdsc-bottom-spacing);
11
11
  }
12
12
 
13
13
  .fds-heading--2xl {
14
- --dsc-bottom-spacing: var(--ds-spacing-7);
14
+ --fdsc-bottom-spacing: var(--fds-spacing-7);
15
15
 
16
- font: var(--ds-typography-heading-2xl);
16
+ font: var(--fds-typography-heading-2xlarge);
17
17
  font-family: inherit;
18
18
  }
19
19
 
20
20
  .fds-heading--xl {
21
- --dsc-bottom-spacing: var(--ds-spacing-6);
21
+ --fdsc-bottom-spacing: var(--fds-spacing-6);
22
22
 
23
- font: var(--ds-typography-heading-xl);
23
+ font: var(--fds-typography-heading-xlarge);
24
24
  font-family: inherit;
25
25
  }
26
26
 
27
27
  .fds-heading--lg {
28
- --dsc-bottom-spacing: var(--ds-spacing-5);
28
+ --fdsc-bottom-spacing: var(--fds-spacing-5);
29
29
 
30
- font: var(--ds-typography-heading-lg);
30
+ font: var(--fds-typography-heading-large);
31
31
  font-family: inherit;
32
32
  }
33
33
 
34
34
  .fds-heading--md {
35
- --dsc-bottom-spacing: var(--ds-spacing-4);
35
+ --fdsc-bottom-spacing: var(--fds-spacing-4);
36
36
 
37
- font: var(--ds-typography-heading-md);
37
+ font: var(--fds-typography-heading-medium);
38
38
  font-family: inherit;
39
39
  }
40
40
 
41
41
  .fds-heading--sm {
42
- --dsc-bottom-spacing: var(--ds-spacing-3);
42
+ --fdsc-bottom-spacing: var(--fds-spacing-3);
43
43
 
44
- font: var(--ds-typography-heading-sm);
44
+ font: var(--fds-typography-heading-small);
45
45
  font-family: inherit;
46
46
  }
47
47
 
48
48
  .fds-heading--xs {
49
- --dsc-bottom-spacing: var(--ds-spacing-2);
49
+ --fdsc-bottom-spacing: var(--fds-spacing-2);
50
50
 
51
- font: var(--ds-typography-heading-xs);
51
+ font: var(--fds-typography-heading-xsmall);
52
52
  font-family: inherit;
53
53
  }
54
54
 
55
55
  .fds-heading--2xs {
56
- --dsc-bottom-spacing: var(--ds-spacing-1);
56
+ --fdsc-bottom-spacing: var(--fds-spacing-1);
57
57
 
58
- font: var(--ds-typography-heading-2xs);
58
+ font: var(--fds-typography-heading-xxsmall);
59
59
  font-family: inherit;
60
60
  }
61
61
  }
package/helptext.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer ds.helptext {
1
+ @layer fds.helptext {
2
2
  .fds-helptext__button {
3
3
  background-color: transparent;
4
4
  border-radius: 50px;
@@ -21,9 +21,9 @@
21
21
  }
22
22
 
23
23
  .fds-helptext__icon {
24
- color: var(--ds-color-accent-base-default);
25
- width: var(--ds-sizing-7);
26
- height: var(--ds-sizing-7);
24
+ color: var(--fds-semantic-text-action-default);
25
+ width: var(--fds-sizing-7);
26
+ height: var(--fds-sizing-7);
27
27
  }
28
28
 
29
29
  .fds-helptext__button:where(:hover, :focus, [data-state^='open']) > .fds-helptext__icon {
@@ -35,25 +35,24 @@
35
35
  }
36
36
 
37
37
  .fds-helptext__content {
38
- font: var(--ds-typography-paragraph-md);
39
- color: var(--ds-color-neutral-text-default);
38
+ font: var(--fds-typography-paragraph-medium);
40
39
  font-family: inherit;
41
40
  width: fit-content;
42
41
  max-width: 700px;
43
42
  }
44
43
 
45
44
  .fds-helptext--sm .fds-helptext__icon {
46
- width: var(--ds-sizing-6);
47
- height: var(--ds-sizing-6);
45
+ width: var(--fds-sizing-6);
46
+ height: var(--fds-sizing-6);
48
47
  }
49
48
 
50
49
  .fds-helptext--md .fds-helptext__icon {
51
- width: var(--ds-sizing-7);
52
- height: var(--ds-sizing-7);
50
+ width: var(--fds-sizing-7);
51
+ height: var(--fds-sizing-7);
53
52
  }
54
53
 
55
54
  .fds-helptext--lg .fds-helptext__icon {
56
- width: var(--ds-sizing-8);
57
- height: var(--ds-sizing-8);
55
+ width: var(--fds-sizing-8);
56
+ height: var(--fds-sizing-8);
58
57
  }
59
58
  }
package/index.css CHANGED
@@ -1,21 +1,21 @@
1
1
  @charset "UTF-8";
2
2
 
3
- @layer ds.typography, ds.utils, ds.box, ds.btn;
3
+ @layer fds.typography, fds.utils, fds.box, fds.btn;
4
4
 
5
5
  /** Import order defines ordinal specificity for layers */
6
- @import url('./label.css');
7
- @import url('./heading.css');
8
- @import url('./paragraph.css');
9
- @import url('./ingress.css');
10
6
  @import url('./button.css');
11
7
  @import url('./utils.css');
12
8
  @import url('./box.css');
13
9
  @import url('./alert.css');
10
+ @import url('./ingress.css');
14
11
  @import url('./skiplink.css');
15
12
  @import url('./accordion.css');
16
13
  @import url('./switch.css');
17
14
  @import url('./checkbox.css');
18
15
  @import url('./error-message.css');
16
+ @import url('./label.css');
17
+ @import url('./heading.css');
18
+ @import url('./paragraph.css');
19
19
  @import url('./radio.css');
20
20
  @import url('./search.css');
21
21
  @import url('./native-select.css');
package/ingress.css CHANGED
@@ -1,40 +1,40 @@
1
- @layer ds.typography.ingress {
1
+ @layer fds.typography.ingress {
2
2
  .fds-ingress {
3
- --dsc-bottom-spacing: var(--ds-spacing-5);
3
+ --fdsc-bottom-spacing: var(--fds-spacing-5);
4
4
 
5
5
  margin: 0;
6
- color: var(--ds-color-neutral-text-default);
6
+ color: var(--fds-semantic-text-neutral-default);
7
7
  }
8
8
 
9
9
  .fds-ingress--spacing {
10
- margin-bottom: var(--dsc-bottom-spacing);
10
+ margin-bottom: var(--fdsc-bottom-spacing);
11
11
  }
12
12
 
13
13
  .fds-ingress--md {
14
- --dsc-bottom-spacing: var(--ds-spacing-5);
14
+ --fdsc-bottom-spacing: var(--fds-spacing-5);
15
15
 
16
- font: var(--ds-typography-ingress-md);
16
+ font: var(--fds-typography-ingress-medium);
17
17
  font-family: inherit;
18
18
  }
19
19
 
20
20
  .fds-ingress--lg {
21
- --dsc-bottom-spacing: var(--ds-spacing-6);
21
+ --fdsc-bottom-spacing: var(--fds-spacing-6);
22
22
 
23
- font: var(--ds-typography-ingress-lg);
23
+ font: var(--fds-typography-ingress-large);
24
24
  font-family: inherit;
25
25
  }
26
26
 
27
27
  .fds-ingress--sm {
28
- --dsc-bottom-spacing: var(--ds-spacing-7);
28
+ --fdsc-bottom-spacing: var(--fds-spacing-7);
29
29
 
30
- font: var(--ds-typography-ingress-sm);
30
+ font: var(--fds-typography-ingress-small);
31
31
  font-family: inherit;
32
32
  }
33
33
 
34
34
  .fds-ingress--xs {
35
- --dsc-bottom-spacing: var(--ds-spacing-8);
35
+ --fdsc-bottom-spacing: var(--fds-spacing-8);
36
36
 
37
- font: var(--ds-typography-ingress-xs);
37
+ font: var(--fds-typography-ingress-xsmall);
38
38
  font-family: inherit;
39
39
  }
40
40
  }
package/label.css CHANGED
@@ -1,34 +1,34 @@
1
- @layer ds.typography.label {
1
+ @layer fds.typography.label {
2
2
  .fds-label {
3
- --dsc-bottom-spacing: var(--ds-spacing-1);
3
+ --fdsc-bottom-spacing: var(--fds-spacing-1);
4
4
 
5
5
  display: inline-block;
6
6
  margin: 0;
7
7
  padding: 0;
8
- color: var(--ds-color-neutral-text-default);
8
+ color: var(--fds-semantic-text-neutral-default);
9
9
  }
10
10
 
11
11
  .fds-label--spacing {
12
- margin-bottom: var(--dsc-bottom-spacing);
12
+ margin-bottom: var(--fdsc-bottom-spacing);
13
13
  }
14
14
 
15
15
  .fds-label--lg {
16
- font: var(--ds-typography-label-lg);
16
+ font: var(--fds-typography-label-large);
17
17
  font-family: inherit;
18
18
  }
19
19
 
20
20
  .fds-label--md {
21
- font: var(--ds-typography-label-md);
21
+ font: var(--fds-typography-label-medium);
22
22
  font-family: inherit;
23
23
  }
24
24
 
25
25
  .fds-label--sm {
26
- font: var(--ds-typography-label-sm);
26
+ font: var(--fds-typography-label-small);
27
27
  font-family: inherit;
28
28
  }
29
29
 
30
30
  .fds-label--xs {
31
- font: var(--ds-typography-label-xs);
31
+ font: var(--fds-typography-label-xsmall);
32
32
  font-family: inherit;
33
33
  }
34
34