@digdir/designsystemet-css 0.11.0-alpha.7 → 0.11.0-alpha.9

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 (69) hide show
  1. package/accordion.css +118 -120
  2. package/alert.css +58 -64
  3. package/box.css +70 -72
  4. package/button.css +174 -176
  5. package/card.css +189 -191
  6. package/checkbox.css +157 -159
  7. package/chip.css +140 -142
  8. package/combobox.css +295 -295
  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-summary.css +1 -1
  20. package/dist/fieldset.css +1 -1
  21. package/dist/helptext.css +1 -1
  22. package/dist/index.css +1 -1
  23. package/dist/link.css +1 -1
  24. package/dist/list.css +1 -1
  25. package/dist/modal.css +1 -1
  26. package/dist/native-select.css +1 -1
  27. package/dist/pagination.css +1 -1
  28. package/dist/popover.css +1 -1
  29. package/dist/radio.css +1 -1
  30. package/dist/search.css +1 -1
  31. package/dist/skeleton.css +1 -1
  32. package/dist/skiplink.css +1 -1
  33. package/dist/spinner.css +1 -1
  34. package/dist/switch.css +1 -1
  35. package/dist/table.css +1 -1
  36. package/dist/tabs.css +1 -1
  37. package/dist/tag.css +1 -1
  38. package/dist/textarea.css +1 -1
  39. package/dist/textfield.css +1 -1
  40. package/dist/togglegroup.css +1 -1
  41. package/dist/tooltip.css +1 -1
  42. package/dist/utilities.css +1 -0
  43. package/divider.css +13 -15
  44. package/dropdownmenu.css +55 -46
  45. package/error-summary.css +19 -15
  46. package/fieldset.css +42 -44
  47. package/helptext.css +49 -46
  48. package/index.css +40 -40
  49. package/link.css +50 -52
  50. package/list.css +18 -14
  51. package/modal.css +86 -85
  52. package/native-select.css +88 -90
  53. package/package.json +2 -2
  54. package/pagination.css +53 -55
  55. package/popover.css +71 -69
  56. package/radio.css +151 -146
  57. package/search.css +138 -142
  58. package/skeleton.css +46 -47
  59. package/skiplink.css +41 -41
  60. package/spinner.css +51 -49
  61. package/switch.css +190 -192
  62. package/table.css +117 -111
  63. package/tabs.css +69 -75
  64. package/tag.css +57 -59
  65. package/textarea.css +64 -66
  66. package/textfield.css +122 -122
  67. package/togglegroup.css +22 -24
  68. package/tooltip.css +12 -11
  69. package/utilities.css +38 -0
package/dist/modal.css CHANGED
@@ -1 +1 @@
1
- @layer ds.modal{.ds-modal{background-color:var(--ds-color-neutral-background-default);border:none;border-radius:min(1rem,var(--ds-border-radius-md));box-shadow:var(--ds-shadow-xl);color:var(--ds-color-neutral-text-default);max-width:650px;padding:0;width:100%}.ds-modal::backdrop{animation:fade-in .3s ease-in-out;background-color:rgba(0,0,0,.5)}.ds-modal[open]{animation:slide-in .3s ease-in-out,fade-in .3s ease-in-out}.ds-modal>hr{border-color:var(--ds-color-neutral-border-subtle);margin:var(--ds-spacing-3) 0!important}.ds-modal--lock-scroll{overflow:hidden}@media (max-width:650px){.ds-modal{border-radius:0;max-width:100%;min-width:100%}}@media (prefers-reduced-motion:reduce){.ds-modal[open]{animation:none}.ds-modal::backdrop{animation:none}}@keyframes slide-in{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.ds-modal__header{color:var(--ds-color-neutral-text-default);display:flex;flex-direction:column;gap:var(--ds-spacing-1);justify-content:space-between;padding:var(--ds-spacing-6) var(--ds-spacing-18) var(--ds-spacing-2) var(--ds-spacing-6)}.ds-modal__header--no-button{padding-right:var(--ds-spacing-6)}.ds-modal__header__button{position:absolute;right:var(--ds-spacing-3);top:var(--ds-spacing-3)}.ds-modal__footer{align-items:center;display:flex;gap:var(--ds-spacing-4);padding:var(--ds-spacing-3) var(--ds-spacing-6) var(--ds-spacing-6)}.ds-modal__content{max-height:80vh;overflow-y:auto;padding:var(--ds-spacing-2) var(--ds-spacing-6)}}
1
+ .ds-modal{--dsc-modal-max-width:650px;--dsc-modal-background:var(--ds-color-neutral-background-default);--dsc-modal-color:var(--ds-color-neutral-text-default);--dsc-modal-backdrop-background:rgba(0,0,0,.5);--dsc-modal-header-padding:var(--ds-spacing-6) var(--ds-spacing-18) var(--ds-spacing-2) var(--ds-spacing-6);--dsc-modal-footer-padding:var(--ds-spacing-3) var(--ds-spacing-6) var(--ds-spacing-6) var(--ds-spacing-6);--dsc-modal-content-padding:var(--ds-spacing-2) var(--ds-spacing-6);--dsc-modal-content-max-height:80vh;background-color:var(--dsc-modal-background);border:none;border-radius:min(1rem,var(--ds-border-radius-md));box-shadow:var(--ds-shadow-xl);color:var(--dsc-modal-color);max-width:var(--dsc-modal-max-width);padding:0;width:100%}.ds-modal::backdrop{animation:fade-in .3s ease-in-out;background-color:var(--dsc-modal-backdrop-background)}.ds-modal[open]{animation:slide-in .3s ease-in-out,fade-in .3s ease-in-out}.ds-modal>hr{border-color:var(--ds-color-neutral-border-subtle);margin:var(--ds-spacing-3) 0!important}.ds-modal--lock-scroll{overflow:hidden}@media (max-width:650px){.ds-modal{border-radius:0;max-width:100%;min-width:100%}}@media (prefers-reduced-motion:reduce){.ds-modal[open]{animation:none}.ds-modal::backdrop{animation:none}}.ds-modal__header{color:var(--dsc-modal-color);display:flex;flex-direction:column;gap:var(--ds-spacing-1);justify-content:space-between;padding:var(--dsc-modal-header-padding)}.ds-modal__header--no-button{--dsc-modal-header-padding:var(--ds-spacing-6) var(--ds-spacing-6) var(--ds-spacing-2) var(--ds-spacing-6)}.ds-modal__header__button{position:absolute;right:var(--ds-spacing-3);top:var(--ds-spacing-3)}.ds-modal__footer{align-items:center;display:flex;gap:var(--ds-spacing-4);padding:var(--dsc-modal-footer-padding)}.ds-modal__content{max-height:var(--dsc-modal-content-max-height);overflow-y:auto;padding:var(--dsc-modal-content-padding)}@keyframes slide-in{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}
@@ -1 +1 @@
1
- @layer ds.nativeselect{.ds-native-select__wrapper{display:grid;flex:0 1 auto;position:relative}.ds-native-select__wrapper:after{background-color:var(--ds-color-neutral-text-default);content:"";height:1.5em;-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS45NyA5LjQ3YS43NS43NSAwIDAgMSAxLjA2IDBMMTIgMTQuNDRsNC45Ny00Ljk3YS43NS43NSAwIDEgMSAxLjA2IDEuMDZsLTUuNSA1LjVhLjc1Ljc1IDAgMCAxLTEuMDYgMGwtNS41LTUuNWEuNzUuNzUgMCAwIDEgMC0xLjA2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS45NyA5LjQ3YS43NS43NSAwIDAgMSAxLjA2IDBMMTIgMTQuNDRsNC45Ny00Ljk3YS43NS43NSAwIDEgMSAxLjA2IDEuMDZsLTUuNSA1LjVhLjc1Ljc1IDAgMCAxLTEuMDYgMGwtNS41LTUuNWEuNzUuNzUgMCAwIDEgMC0xLjA2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");-webkit-mask-size:contain;mask-size:contain;pointer-events:none;position:absolute;right:var(--ds-spacing-2);top:50%;transform:translateY(-50%);width:1.5em}.ds-native-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color: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);font-family:inherit;padding:0 var(--ds-spacing-2);position:relative}@media (hover:hover) and (pointer:fine){.ds-native-select: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)}}.ds-native-select.ds-native-select--multiple{background-image:none}.ds-native-select--sm{height:var(--ds-sizing-10);padding:0 var(--ds-spacing-2);padding-right:var(--ds-spacing-8)}.ds-native-select--md{height:var(--ds-sizing-12);padding:0 var(--ds-spacing-3);padding-right:var(--ds-spacing-10)}.ds-native-select--lg{height:var(--ds-sizing-14);padding:0 var(--ds-spacing-4);padding-right:var(--ds-spacing-12)}.ds-native-select--container{display:grid;gap:var(--ds-spacing-2)}.ds-native-select--container:has(.ds-native-select:disabled){opacity:var(--ds-disabled-opacity)}.ds-native-select:disabled{cursor:not-allowed}.ds-native-select--readonly .ds-native-select{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.ds-native-select--error>.ds-native-select:not(:focus-visible){border-color:var(--ds-color-danger-border-default);box-shadow:inset 0 0 0 1px var(--ds-color-danger-border-default)}.ds-native-select__readonly__icon{height:1.2em;width:1.2em}.ds-native-select__error-message:empty{display:none}.ds-native-select__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}.ds-native-select__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-spacing-2)*-1)}}
1
+ .ds-native-select__wrapper{display:grid;flex:0 1 auto;position:relative}.ds-native-select__wrapper:after{background-color:var(--ds-color-neutral-text-default);content:"";height:1.5em;-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS45NyA5LjQ3YS43NS43NSAwIDAgMSAxLjA2IDBMMTIgMTQuNDRsNC45Ny00Ljk3YS43NS43NSAwIDEgMSAxLjA2IDEuMDZsLTUuNSA1LjVhLjc1Ljc1IDAgMCAxLTEuMDYgMGwtNS41LTUuNWEuNzUuNzUgMCAwIDEgMC0xLjA2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS45NyA5LjQ3YS43NS43NSAwIDAgMSAxLjA2IDBMMTIgMTQuNDRsNC45Ny00Ljk3YS43NS43NSAwIDEgMSAxLjA2IDEuMDZsLTUuNSA1LjVhLjc1Ljc1IDAgMCAxLTEuMDYgMGwtNS41LTUuNWEuNzUuNzUgMCAwIDEgMC0xLjA2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");-webkit-mask-size:contain;mask-size:contain;pointer-events:none;position:absolute;right:var(--ds-spacing-2);top:50%;transform:translateY(-50%);width:1.5em}.ds-native-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color: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);font-family:inherit;padding:0 var(--ds-spacing-2);position:relative}@media (hover:hover) and (pointer:fine){.ds-native-select: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)}}.ds-native-select.ds-native-select--multiple{background-image:none}.ds-native-select--sm{height:var(--ds-sizing-10);padding:0 var(--ds-spacing-2);padding-right:var(--ds-spacing-8)}.ds-native-select--md{height:var(--ds-sizing-12);padding:0 var(--ds-spacing-3);padding-right:var(--ds-spacing-10)}.ds-native-select--lg{height:var(--ds-sizing-14);padding:0 var(--ds-spacing-4);padding-right:var(--ds-spacing-12)}.ds-native-select--container{display:grid;gap:var(--ds-spacing-2)}.ds-native-select--container:has(.ds-native-select:disabled){opacity:var(--ds-disabled-opacity)}.ds-native-select:disabled{cursor:not-allowed}.ds-native-select--readonly .ds-native-select{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.ds-native-select--error>.ds-native-select:not(:focus-visible){border-color:var(--ds-color-danger-border-default);box-shadow:inset 0 0 0 1px var(--ds-color-danger-border-default)}.ds-native-select__readonly__icon{height:1.2em;width:1.2em}.ds-native-select__error-message:empty{display:none}.ds-native-select__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}.ds-native-select__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-spacing-2)*-1)}
@@ -1 +1 @@
1
- @layer ds.pagination{.ds-pagination{--dsc-pagination-listitem-margin:var(--ds-spacing-4);--dsc-pagination-ellipsis-width:var(--ds-sizing-12);--dsc-pagination-chevron-margin:var(--ds-spacing-2);display:flex;list-style-type:none;margin:0;padding:0;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ds-pagination--hidden{visibility:hidden}.ds-pagination--lg,.ds-pagination--md,.ds-pagination--sm{--dsc-pagination-chevron-margin:var(--ds-spacing-2)}.ds-pagination li:first-child{margin-right:var(--dsc-pagination-chevron-margin)}.ds-pagination li:last-child{margin-left:var(--dsc-pagination-chevron-margin)}.ds-pagination__item{flex:1;margin-right:var(--dsc-pagination-listitem-margin)}.ds-pagination--sm .ds-pagination__item{--dsc-pagination-listitem-margin:var(--ds-spacing-2);--dsc-pagination-ellipsis-width:var(--ds-sizing-10)}.ds-pagination--md .ds-pagination__item{--dsc-pagination-listitem-margin:var(--ds-spacing-4);--dsc-pagination-ellipsis-width:var(--ds-sizing-12)}.ds-pagination--lg .ds-pagination__item{--dsc-pagination-listitem-margin:var(--ds-spacing-6);--dsc-pagination-ellipsis-width:var(--ds-sizing-14)}.ds-pagination__item.ds-pagination--compact{--dsc-pagination-listitem-margin:var(--ds-spacing-0);--dsc-pagination-chevron-margin:var(--ds-spacing-1)}.ds-pagination__ellipsis{margin-top:.5em;text-align:center;width:var(--dsc-pagination-ellipsis-width)}}
1
+ .ds-pagination{--dsc-pagination-listitem-margin:var(--ds-spacing-4);--dsc-pagination-ellipsis-width:var(--ds-sizing-12);--dsc-pagination-chevron-margin:var(--ds-spacing-2);display:flex;list-style-type:none;margin:0;padding:0;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ds-pagination--hidden{visibility:hidden}.ds-pagination--lg,.ds-pagination--md,.ds-pagination--sm{--dsc-pagination-chevron-margin:var(--ds-spacing-2)}.ds-pagination li:first-child{margin-right:var(--dsc-pagination-chevron-margin)}.ds-pagination li:last-child{margin-left:var(--dsc-pagination-chevron-margin)}.ds-pagination__item{flex:1;margin-right:var(--dsc-pagination-listitem-margin)}.ds-pagination--sm .ds-pagination__item{--dsc-pagination-listitem-margin:var(--ds-spacing-2);--dsc-pagination-ellipsis-width:var(--ds-sizing-10)}.ds-pagination--md .ds-pagination__item{--dsc-pagination-listitem-margin:var(--ds-spacing-4);--dsc-pagination-ellipsis-width:var(--ds-sizing-12)}.ds-pagination--lg .ds-pagination__item{--dsc-pagination-listitem-margin:var(--ds-spacing-6);--dsc-pagination-ellipsis-width:var(--ds-sizing-14)}.ds-pagination__item.ds-pagination--compact{--dsc-pagination-listitem-margin:var(--ds-spacing-0);--dsc-pagination-chevron-margin:var(--ds-spacing-1)}.ds-pagination__ellipsis{margin-top:.5em;text-align:center;width:var(--dsc-pagination-ellipsis-width)}
package/dist/popover.css CHANGED
@@ -1 +1 @@
1
- @layer ds.popover{.ds-popover{--dsc-popover-border:1px solid;--dsc-popover-background:var(--ds-color-neutral-background-default);background:var(--dsc-popover-background);border:var(--dsc-popover-border);border-radius:min(1rem,var(--ds-border-radius-md));max-width:300px;padding:var(--ds-spacing-3);z-index:1500}.ds-popover--sm{padding:var(--ds-spacing-2) var(--ds-spacing-3)}.ds-popover--md{padding:var(--ds-spacing-3) var(--ds-spacing-4)}.ds-popover--lg{padding:var(--ds-spacing-3) var(--ds-spacing-5)}.ds-popover--default{--dsc-popover-background:var(--ds-color-neutral-background-default);border-color:var(--ds-color-neutral-border-default)}.ds-popover--info{--dsc-popover-background:var(--ds-color-info-surface-default);border-color:var(--ds-color-info-border-default);color:var(--ds-color-info-text-default)}.ds-popover--warning{--dsc-popover-background:var(--ds-color-warning-surface-default);border-color:var(--ds-color-warning-border-default);color:var(--ds-color-warning-text-default)}.ds-popover--danger{--dsc-popover-background:var(--ds-color-danger-surface-default);border-color:var(--ds-color-danger-border-default);color:var(--ds-color-danger-text-default)}.ds-popover__arrow{background:var(--dsc-popover-background);position:absolute;transform:rotate(45deg)}.ds-popover__arrow.ds-popover__arrow--top{border-left:var(--dsc-popover-border);border-top:var(--dsc-popover-border);border-color:inherit}.ds-popover__arrow.ds-popover__arrow--bottom{border-bottom:var(--dsc-popover-border);border-right:var(--dsc-popover-border);border-color:inherit}.ds-popover__arrow.ds-popover__arrow--right{border-right:var(--dsc-popover-border);border-top:var(--dsc-popover-border);border-color:inherit}.ds-popover__arrow.ds-popover__arrow--left{border-bottom:var(--dsc-popover-border);border-left:var(--dsc-popover-border);border-color:inherit}}
1
+ .ds-popover{--dsc-popover-border:1px solid;--dsc-popover-background:var(--ds-color-neutral-background-default);--dsc-popover-color:var(--ds-color-neutral-text-default);--dsc-popover-border-color:var(--ds-color-neutral-border-default);--dsc-popover-padding:var(--ds-spacing-3);--dsc-popover-max-width:300px;--dsc-popover-border-radius:min(1rem,var(--ds-border-radius-md));background:var(--dsc-popover-background);border:var(--dsc-popover-border);border-color:var(--dsc-popover-border-color);border-radius:var(--dsc-popover-border-radius);color:var(--dsc-popover-color);max-width:var(--dsc-popover-max-width);padding:var(--dsc-popover-padding);z-index:1500}.ds-popover--sm{--dsc-popover-padding:var(--ds-spacing-2) var(--ds-spacing-3)}.ds-popover--md{--dsc-popover-padding:var(--ds-spacing-3) var(--ds-spacing-4)}.ds-popover--lg{--dsc-popover-padding:var(--ds-spacing-3) var(--ds-spacing-5)}.ds-popover--default{--dsc-popover-background:var(--ds-color-neutral-background-default);--dsc-popover-border-color:var(--ds-color-neutral-border-default);--dsc-popover-color:var(--ds-color-neutral-text-default)}.ds-popover--info{--dsc-popover-background:var(--ds-color-info-surface-default);--dsc-popover-border-color:var(--ds-color-info-border-default);--dsc-popover-color:var(--ds-color-info-text-default)}.ds-popover--warning{--dsc-popover-background:var(--ds-color-warning-surface-default);--dsc-popover-border-color:var(--ds-color-warning-border-default);--dsc-popover-color:var(--ds-color-warning-text-default)}.ds-popover--danger{--dsc-popover-background:var(--ds-color-danger-surface-default);--dsc-popover-border-color:var(--ds-color-danger-border-default);--dsc-popover-color:var(--ds-color-danger-text-default)}.ds-popover__arrow{background:var(--dsc-popover-background);position:absolute;transform:rotate(45deg)}.ds-popover__arrow.ds-popover__arrow--top{border-left:var(--dsc-popover-border);border-top:var(--dsc-popover-border);border-color:inherit}.ds-popover__arrow.ds-popover__arrow--bottom{border-bottom:var(--dsc-popover-border);border-right:var(--dsc-popover-border);border-color:inherit}.ds-popover__arrow.ds-popover__arrow--right{border-right:var(--dsc-popover-border);border-top:var(--dsc-popover-border);border-color:inherit}.ds-popover__arrow.ds-popover__arrow--left{border-bottom:var(--dsc-popover-border);border-left:var(--dsc-popover-border);border-color:inherit}
package/dist/radio.css CHANGED
@@ -1 +1 @@
1
- @layer ds.radio{.ds-radio{--dsc-radio-size:var(--ds-spacing-5);--dsc-radio-focus-border-width:3px;--dsc-radio-background:var(--ds-color-neutral-background-default);--dsc-radio-border-color:var(--ds-color-neutral-border-default);--dsc-radio-border__hover--size:calc(var(--ds-spacing-3)/2);--dsc-radio-border__hover:0 0 0 var(--dsc-radio-border__hover--size) var(--ds-color-accent-surface-hover);display:grid}.ds-radio:has(.ds-radio__label){gap:var(--ds-spacing-2);grid-template-columns:var(--dsc-radio-size) auto}.ds-radio__input{align-self:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--dsc-radio-background);border-radius:50%;box-shadow:inset 0 0 0 2px var(--dsc-radio-border-color);cursor:pointer;height:var(--dsc-radio-size);margin:0;outline:none;position:relative;width:var(--dsc-radio-size);z-index:1}.ds-radio__input:before{border-radius:var(--ds-border-radius-md);content:"";cursor:pointer;display:block;height:2.75rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:2.75rem}.ds-radio__label{align-items:center;cursor:pointer;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}.ds-radio__description{color:var(--ds-color-neutral-text-subtle);grid-column:2;margin-top:calc(var(--ds-spacing-2)*-1)}.ds-radio--readonly>.ds-radio__input,.ds-radio--readonly>.ds-radio__input:before,.ds-radio--readonly>.ds-radio__label{cursor:default}.ds-radio:has(.ds-radio__input:disabled)>.ds-radio__description{opacity:var(--ds-disabled-opacity)}.ds-radio:has(.ds-radio__input:disabled)>.ds-radio__label,.ds-radio__input:disabled,.ds-radio__input:disabled:before{cursor:not-allowed;opacity:var(--ds-disabled-opacity)}.ds-radio__input:focus-visible{box-shadow:inset 0 0 0 2px var(--dsc-radio-border-color),inset 0 0 0 6px var(--dsc-radio-background)}.ds-radio:has(.ds-radio__input:focus-visible){--dsc-focus-border-width:3px;border-radius:var(--ds-border-radius-md);box-shadow:0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);outline:var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);outline-offset:var(--dsc-focus-border-width)}.ds-radio__input:checked{--dsc-radio-border-color:var(--ds-color-accent-base-default);background:var(--dsc-radio-border-color)}.ds-radio--readonly>.ds-radio__input{--dsc-radio-border-color:var(--ds-color-neutral-border-subtle);--dsc-radio-background:var(--ds-color-neutral-background-subtle)}.ds-radio__input:checked:not(:focus-visible){box-shadow:inset 0 0 0 2px var(--dsc-radio-border-color),inset 0 0 0 6px var(--dsc-radio-background)}.ds-radio--readonly>.ds-radio__input:checked{background:var(--ds-color-neutral-border-strong)}.ds-radio--error>.ds-radio__input:not(:disabled,:focus-visible){--dsc-radio-border-color:var(--ds-color-danger-border-default)}@media (hover:hover) and (pointer:fine){.ds-radio:not(.ds-radio--readonly)>.ds-radio__input:hover:not(:disabled)+.ds-radio__label,.ds-radio:not(.ds-radio--readonly)>.ds-radio__label:hover:not(:disabled){color:var(--ds-color-accent-text-subtle)}.ds-radio:not(.ds-radio--readonly)>.ds-radio__input:hover:not(:checked,:disabled,:focus-visible){--dsc-radio-border-color:var(--ds-color-accent-border-strong);box-shadow:var(--dsc-radio-border__hover),inset 0 0 0 2px var(--dsc-radio-border-color)}.ds-radio:not(.ds-radio--readonly)>.ds-radio__input:hover:checked:not(:disabled,:focus-visible){box-shadow:var(--dsc-radio-border__hover),inset 0 0 0 2px var(--dsc-radio-border-color),inset 0 0 0 6px var(--dsc-radio-background)}}.ds-radio--sm{--dsc-radio-size:var(--ds-sizing-5)}.ds-radio--md{--dsc-radio-size:var(--ds-sizing-6);--dsc-radio-border__hover--size:var(--ds-spacing-1)}.ds-radio--lg{--dsc-radio-size:var(--ds-sizing-7)}.ds-radio-group{display:flex;flex-direction:column;gap:var(--ds-spacing-3);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ds-radio-group--horizontal{display:flex;flex-direction:row;gap:var(--ds-spacing-6)}}
1
+ .ds-radio{--dsc-radio-size:var(--ds-spacing-5);--dsc-radio-focus-border-width:3px;--dsc-radio-background:radial-gradient(circle,var(--ds-color-neutral-background-default) 60%,transparent 60%);--dsc-radio-border-color:var(--ds-color-neutral-border-default);--dsc-radio-border__hover--size:calc(var(--ds-spacing-3)/2);--dsc-radio-border__hover:0 0 0 var(--dsc-radio-border__hover--size) var(--ds-color-accent-surface-hover);--dsc-radio-box_shadow-size:7px;display:grid}.ds-radio:has(.ds-radio__label){gap:var(--ds-spacing-2);grid-template-columns:var(--dsc-radio-size) auto}.ds-radio__input{align-self:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--dsc-radio-background);border-radius:50%;box-shadow:inset 0 0 0 2px var(--dsc-radio-border-color);cursor:pointer;height:var(--dsc-radio-size);margin:0;outline:none;position:relative;width:var(--dsc-radio-size);z-index:1}.ds-radio__input:before{border-radius:var(--ds-border-radius-md);content:"";cursor:pointer;display:block;height:2.75rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:2.75rem}.ds-radio__label{align-items:center;cursor:pointer;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}.ds-radio__description{color:var(--ds-color-neutral-text-subtle);grid-column:2;margin-top:calc(var(--ds-spacing-2)*-1)}.ds-radio--readonly>.ds-radio__input,.ds-radio--readonly>.ds-radio__input:before,.ds-radio--readonly>.ds-radio__label{cursor:default}.ds-radio:has(.ds-radio__input:disabled)>.ds-radio__description{opacity:var(--ds-disabled-opacity)}.ds-radio:has(.ds-radio__input:disabled)>.ds-radio__label,.ds-radio__input:disabled,.ds-radio__input:disabled:before{cursor:not-allowed;opacity:var(--ds-disabled-opacity)}.ds-radio:has(.ds-radio__input:focus-visible){--dsc-focus-border-width:3px;border-radius:var(--ds-border-radius-md);box-shadow:0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);outline:var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);outline-offset:var(--dsc-focus-border-width)}.ds-radio__input:checked{--dsc-radio-border-color:var(--ds-color-accent-base-default);--dsc-radio-background:radial-gradient(circle,var(--ds-color-accent-contrast-1) 60%,transparent 60%);background:var(--dsc-radio-background)}.ds-radio--readonly>.ds-radio__input{--dsc-radio-border-color:var(--ds-color-neutral-border-subtle);--dsc-radio-background:var(--ds-color-neutral-background-subtle)}.ds-radio__input:focus-visible:not(:checked){--dsc-radio-border-color:var(--ds-color-accent-border-strong);box-shadow:inset 0 0 0 2px var(--dsc-radio-border-color)}.ds-radio--readonly>.ds-radio__input:checked{background:var(--ds-color-neutral-border-strong)}.ds-radio--error>.ds-radio__input:not(:disabled,:focus-visible){--dsc-radio-border-color:var(--ds-color-danger-border-default)}.ds-radio__input:focus-visible:checked{box-shadow:inset 0 0 0 var(--dsc-radio-box_shadow-size) var(--dsc-radio-border-color)}.ds-radio__input:checked:not(:focus-visible){box-shadow:inset 0 0 0 var(--dsc-radio-box_shadow-size) var(--dsc-radio-border-color)}@media (hover:hover) and (pointer:fine){.ds-radio:not(.ds-radio--readonly)>.ds-radio__input:hover:not(:disabled)+.ds-radio__label,.ds-radio:not(.ds-radio--readonly)>.ds-radio__label:hover:not(:disabled){color:var(--ds-color-accent-text-subtle)}.ds-radio:not(.ds-radio--readonly)>.ds-radio__input:hover:not(:checked,:disabled,:focus-visible){--dsc-radio-border-color:var(--ds-color-accent-border-strong);box-shadow:var(--dsc-radio-border__hover),inset 0 0 0 2px var(--dsc-radio-border-color)}.ds-radio:not(.ds-radio--readonly)>.ds-radio__input:hover:checked:not(:disabled,:focus-visible){box-shadow:var(--dsc-radio-border__hover),inset 0 0 0 var(--dsc-radio-box_shadow-size) var(--dsc-radio-border-color)}}.ds-radio--sm{--dsc-radio-size:var(--ds-sizing-5);--dsc-radio-box_shadow-size:6px}.ds-radio--md{--dsc-radio-size:var(--ds-sizing-6);--dsc-radio-border__hover--size:var(--ds-spacing-1);--dsc-radio-box_shadow-size:7px}.ds-radio--lg{--dsc-radio-size:var(--ds-sizing-7);--dsc-radio-box_shadow-size:8px}.ds-radio-group{display:flex;flex-direction:column;gap:var(--ds-spacing-3);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ds-radio-group--horizontal{display:flex;flex-direction:row;gap:var(--ds-spacing-6)}
package/dist/search.css CHANGED
@@ -1 +1 @@
1
- @layer ds.search{.ds-search{display:inline-grid;gap:var(--ds-spacing-2);width:100%}.ds-search--sm{--dsc-search-button-clear-size:var(--ds-sizing-5)}.ds-search--md{--dsc-search-button-clear-size:var(--ds-sizing-6)}.ds-search--lg{--dsc-search-button-clear-size:var(--ds-sizing-8)}.ds-search__error:empty{display:none}.ds-search__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}.ds-search__field{align-items:stretch;border-radius:var(--ds-border-radius-md);display:flex;position:relative;width:100%}.ds-search__icon{height:100%;left:var(--ds-spacing-4);pointer-events:none;position:absolute;transform:scale(1.5);z-index:2}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.ds-search__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-family:inherit;height:var(--ds-sizing-10);padding:0 var(--ds-spacing-3);position:relative;width:100%}.ds-search__input.ds-search__input--with-search-button{border-bottom-right-radius:0;border-top-right-radius:0}.ds-search__input:disabled{cursor:not-allowed}.ds-search__input[type=search]:focus-visible{z-index:1}.ds-search:has(.ds-search__input:disabled){opacity:var(--ds-disabled-opacity)}.ds-search__search-button{border-bottom-left-radius:0;border-top-left-radius:0}.ds-search__search-button:not(:focus-visible){border-left:0}.ds-search__search-button:focus-visible{z-index:1}.ds-search__clear-button{align-items:center;background:none;border:none;border-radius:var(--ds-border-radius-md);color:var(--ds-color-neutral-text-default);cursor:pointer;display:inline-flex;font-size:1.25rem;height:var(--dsc-search-button-clear-size);justify-content:center;padding:0;position:absolute;right:.6em;top:50%;transform:translateY(-50%);width:var(--dsc-search-button-clear-size);z-index:2}.ds-search--sm .ds-search__input{--dsc-search-button-clear-size:var(--ds-sizing-4);height:var(--ds-sizing-10);padding:0 var(--ds-spacing-3);padding-right:2.5em}.ds-search--sm .ds-search__icon{left:var(--ds-spacing-3)}.ds-search--md .ds-search__input{--dsc-search-button-clear-size:var(--ds-sizing-6);height:var(--ds-sizing-12);padding:0 var(--ds-spacing-4);padding-right:2.2em}.ds-search--md .ds-search__icon{left:var(--ds-spacing-4)}.ds-search--lg .ds-search__input{--dsc-search-button-clear-size:var(--ds-sizing-12);height:var(--ds-sizing-14);padding:0 var(--ds-spacing-5);padding-right:2em}.ds-search--lg .ds-search__icon{left:var(--ds-spacing-5)}.ds-search__input.ds-search__input--simple{padding-left:2.4em}.ds-search__error-message>.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){.ds-search__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)}.ds-search__clear-button:not(:focus-visible,:disabled,[aria-disabled]):hover{background:var(--ds-color-accent-surface-hover)}}}
1
+ .ds-search{--dsc-search-clear-button-size:var(--ds-sizing-6);--dsc-search-input-background:var(--ds-color-neutral-background-default);--dsc-search-input-border-color:var(--ds-color-neutral-border-default);--dsc-search-input-border:1px solid var(--dsc-search-input-border-color);--dsc-search-input-color:var(--ds-color-neutral-text-default);display:inline-grid;gap:var(--ds-spacing-2);width:100%}.ds-search--sm{--dsc-search-clear-button-size:var(--ds-sizing-5)}.ds-search--md{--dsc-search-clear-button-size:var(--ds-sizing-6)}.ds-search--lg{--dsc-search-clear-button-size:var(--ds-sizing-8)}.ds-search__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}.ds-search__field{align-items:stretch;border-radius:var(--ds-border-radius-md);display:flex;position:relative;width:100%}.ds-search__icon{height:100%;left:var(--ds-spacing-4);pointer-events:none;position:absolute;transform:scale(1.5);z-index:2}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.ds-search__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(---dsc-search-input-background);border:var(--dsc-search-input-border);border-radius:var(--ds-border-radius-md);box-sizing:border-box;color:var(--dsc-search-input-color);flex:0 1 auto;font-family:inherit;height:var(--ds-sizing-10);padding:0 var(--ds-spacing-3);position:relative;width:100%}.ds-search__input.ds-search__input--with-search-button{border-bottom-right-radius:0;border-top-right-radius:0}.ds-search__input:disabled{cursor:not-allowed}.ds-search__input[type=search]:focus-visible{z-index:1}.ds-search:has(.ds-search__input:disabled){opacity:var(--ds-disabled-opacity)}.ds-search__search-button{border-bottom-left-radius:0;border-top-left-radius:0}.ds-search__search-button:not(:focus-visible){border-left:0}.ds-search__search-button:focus-visible{z-index:1}.ds-search__clear-button{align-items:center;background:none;border:none;border-radius:var(--ds-border-radius-md);color:var(--ds-color-neutral-text-default);cursor:pointer;display:inline-flex;font-size:1.25rem;height:var(--dsc-search-clear-button-size);justify-content:center;padding:0;position:absolute;right:.6em;top:50%;transform:translateY(-50%);width:var(--dsc-search-clear-button-size);z-index:2}.ds-search--sm .ds-search__input{--dsc-search-clear-button-size:var(--ds-sizing-4);height:var(--ds-sizing-10);padding:0 var(--ds-spacing-3);padding-right:2.5em}.ds-search--sm .ds-search__icon{left:var(--ds-spacing-3)}.ds-search--md .ds-search__input{--dsc-search-clear-button-size:var(--ds-sizing-6);height:var(--ds-sizing-12);padding:0 var(--ds-spacing-4);padding-right:2.2em}.ds-search--md .ds-search__icon{left:var(--ds-spacing-4)}.ds-search--lg .ds-search__input{--dsc-search-clear-button-size:var(--ds-sizing-12);height:var(--ds-sizing-14);padding:0 var(--ds-spacing-5);padding-right:2em}.ds-search--lg .ds-search__icon{left:var(--ds-spacing-5)}.ds-search__input.ds-search__input--simple{padding-left:2.4em}@media (hover:hover) and (pointer:fine){.ds-search__input:not(:focus-visible,:disabled,[aria-disabled]):hover{--dsc-search-input-border-color:var(--ds-color-accent-border-strong);box-shadow:inset 0 0 0 1px var(--ds-color-accent-border-strong)}.ds-search__clear-button:not(:focus-visible,:disabled,[aria-disabled]):hover{background:var(--ds-color-accent-surface-hover)}}
package/dist/skeleton.css CHANGED
@@ -1 +1 @@
1
- @layer ds.skeleton{.ds-skeleton{--dsc-skeleton-animation-duration:0.8s;animation:ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;background-color:var(--ds-color-neutral-surface-default);height:1.3em;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ds-skeleton--circle{aspect-ratio:1/1;border-radius:var(--ds-border-radius-full);width:1.3em}.ds-skeleton--rectangle{border-radius:min(1rem,var(--ds-border-radius-lg));width:100%}.ds-skeleton--text{border-radius:var(--ds-border-radius-full);height:auto;transform:scaleY(.6);transform-origin:0 55%;width:100%}.ds-skeleton--text:empty:before{content:"\00a0"}.ds-skeleton--has-children{color:transparent!important;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ds-skeleton--has-children>*{visibility:hidden}@media (prefers-reduced-motion:reduce){.ds-skeleton{--dsc-skeleton-animation-duration:1.6s}}@keyframes ds-skeleton-opacity-fade{0%{opacity:1}to{opacity:.4}}}
1
+ .ds-skeleton{--dsc-skeleton-animation-duration:0.8s;--dsc-skeleton-background:var(--ds-color-neutral-surface-default);animation:ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;background-color:var(--dsc-skeleton-background);height:1.3em;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ds-skeleton--circle{aspect-ratio:1/1;border-radius:var(--ds-border-radius-full);width:1.3em}.ds-skeleton--rectangle{border-radius:min(1rem,var(--ds-border-radius-lg));width:100%}.ds-skeleton--text{border-radius:var(--ds-border-radius-full);height:auto;transform:scaleY(.6);transform-origin:0 55%;width:100%}.ds-skeleton--text:empty:before{content:"\00a0"}.ds-skeleton--has-children{color:transparent!important;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ds-skeleton--has-children>*{visibility:hidden}@media (prefers-reduced-motion:reduce){.ds-skeleton{--dsc-skeleton-animation-duration:1.6s}}@keyframes ds-skeleton-opacity-fade{0%{opacity:1}to{opacity:.4}}
package/dist/skiplink.css CHANGED
@@ -1 +1 @@
1
- @layer ds.skiplink{.ds-skiplink:focus{display:block;height:auto;margin:inherit;outline:0;overflow:visible;position:static;width:auto;clip:auto;background:var(--ds-color-neutral-backround-default);-webkit-clip-path:none;clip-path:none;color:var(--ds-color-neutral-text-default);padding:var(--ds-spacing-3) var(--ds-spacing-4) var(--ds-spacing-3) var(--ds-spacing-6);text-decoration:none;white-space:inherit}.ds-skiplink__content{--dsc-skiplink-padding:var(--ds-spacing-2) var(--ds-spacing-4);--dsc-skiplink-border-width:3px;align-items:center;background-color:initial;border:var(--ds-border-width-default) solid transparent;border-color:var(--ds-color-accent-border-strong);border-radius:var(--ds-border-radius-md);box-shadow:0 0 0 var(--dsc-skiplink-border-width) var(--ds-color-focus-inner);box-sizing:border-box;color:var(--ds-color-accent-text-subtle);cursor:pointer;display:flex;font-family:inherit;justify-content:center;min-height:var(--ds-sizing-10);outline:var(--dsc-skiplink-border-width) solid var(--ds-color-focus-outer);outline-offset:var(--dsc-skiplink-border-width);padding:var(--dsc-skiplink-padding);position:relative;text-align:center;text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}}
1
+ .ds-skiplink:focus{display:grid;height:auto;margin:inherit;outline:0;overflow:visible;place-items:center;position:static;width:auto;clip:auto;background:var(--ds-color-accent-surface-default);-webkit-clip-path:none;clip-path:none;color:var(--ds-color-neutral-text-default);padding:var(--ds-spacing-3) var(--ds-spacing-4) var(--ds-spacing-3) var(--ds-spacing-6);text-decoration:none;white-space:inherit}.ds-skiplink__content{--dsc-skiplink-padding:var(--ds-spacing-2) var(--ds-spacing-4);--dsc-skiplink-border-width:3px;align-items:center;background-color:initial;border:var(--ds-border-width-default) solid transparent;border-color:var(--ds-color-accent-border-strong);border-radius:var(--ds-border-radius-md);box-shadow:0 0 0 var(--dsc-skiplink-border-width) var(--ds-color-focus-inner);box-sizing:border-box;color:var(--ds-color-accent-text-subtle);cursor:pointer;display:flex;font-family:inherit;justify-content:center;margin:var(--ds-spacing-1);min-height:var(--ds-sizing-10);outline:var(--dsc-skiplink-border-width) solid var(--ds-color-focus-outer);outline-offset:var(--dsc-skiplink-border-width);padding:var(--dsc-skiplink-padding);position:relative;text-align:center;text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}
package/dist/spinner.css CHANGED
@@ -1 +1 @@
1
- @layer ds.spinner{.ds-spinner{animation:ds-spinner-rotate-animation linear infinite;animation-duration:2s}.ds-spinner__circle{stroke-dasharray:1px,200px;animation:ds-spinner-stroke-animation ease-in-out infinite;animation-duration:2s;transform-origin:center}@media (prefers-reduced-motion:reduce){.ds-spinner,.ds-spinner__circle{animation-duration:6s}}.ds-spinner--neutral .ds-spinner__circle{stroke:var(--ds-color-neutral-border-default)}.ds-spinner--accent .ds-spinner__circle{stroke:var(--ds-color-accent-base-default)}.ds-spinner__background{stroke:var(--ds-color-neutral-surface-default)}@keyframes ds-spinner-rotate-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes ds-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
+ .ds-spinner{--dsc-spinner-background:var(--ds-color-neutral-surface-default);--dsc-spinner-stroke:var(--ds-color-accent-base-default);animation:ds-spinner-rotate-animation linear infinite;animation-duration:2s}.ds-spinner__circle{stroke:var(--dsc-spinner-stroke);stroke-dasharray:1px,200px;animation:ds-spinner-stroke-animation ease-in-out infinite;animation-duration:2s;transform-origin:center}@media (prefers-reduced-motion:reduce){.ds-spinner,.ds-spinner__circle{animation-duration:6s}}.ds-spinner--neutral{--dsc-spinner-stroke:var(--ds-color-neutral-border-default)}.ds-spinner--accent{--dsc-spinner-stroke:var(--ds-color-accent-base-default)}.ds-spinner__background{stroke:var(--dsc-spinner-background)}@keyframes ds-spinner-rotate-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes ds-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{.ds-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}}.ds-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}.ds-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)}.ds-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}.ds-switch__readonly__icon{height:1.2em;width:1.2em}.ds-switch__label--right{grid-auto-flow:dense;grid-template-columns:1fr auto}.ds-switch__label--right .ds-switch__track{margin-right:0;order:1}.ds-switch__label--right+.ds-switch__description{padding-left:0}.ds-switch__input{cursor:pointer;height:2.75rem;margin:0;opacity:0;position:absolute;width:2.75rem;z-index:1}.ds-switch--readonly>.ds-switch__label{grid-template-columns:auto -webkit-min-content 1fr;grid-template-columns:auto min-content 1fr}.ds-switch--readonly>.ds-switch__label:where(.ds-switch__label--right){grid-template-columns:-webkit-min-content 1fr auto;grid-template-columns:min-content 1fr auto}.ds-switch--readonly>.ds-switch__input,.ds-switch--readonly>.ds-switch__label{cursor:default}.ds-switch--readonly>.ds-switch__description{margin-left:var(--ds-spacing-1)}.ds-switch--sm,.ds-switch--sm .ds-switch__label{min-height:var(--ds-sizing-6)}.ds-switch--md,.ds-switch--md .ds-switch__label{min-height:var(--ds-sizing-7)}.ds-switch--lg,.ds-switch--lg .ds-switch__label{min-height:var(--ds-sizing-8)}.ds-switch--sm{--dsc-switch-height:var(--ds-sizing-6);--dsc-switch-width:var(--ds-sizing-11)}.ds-switch--sm .ds-switch__input{left:-.25rem;top:-.25rem}.ds-switch--md{--dsc-switch-height:var(--ds-sizing-7);--dsc-switch-width:var(--ds-sizing-13)}.ds-switch--md .ds-switch__input{left:0;top:0}.ds-switch--lg{--dsc-switch-height:var(--ds-sizing-8);--dsc-switch-width:var(--ds-sizing-15)}.ds-switch--lg .ds-switch__input{left:0;top:.25rem}.ds-switch__label:has(.ds-switch__track:only-child){grid-template-columns:auto}.ds-switch__label:has(.ds-switch__track:only-child) .ds-switch__track{margin-right:0}.ds-switch:has(.ds-switch__input:disabled)>.ds-switch__label,.ds-switch__input:disabled{cursor:not-allowed}.ds-switch:has(.ds-switch__input:disabled)>.ds-switch__description,.ds-switch:has(.ds-switch__input:disabled)>.ds-switch__label{opacity:var(--ds-disabled-opacity)}.ds-switch:has(.ds-switch__input:focus-visible){--dsc-focus-border-width:3px;border-radius:var(--ds-border-radius-md);box-shadow:0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);outline:var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);outline-offset:var(--dsc-focus-border-width)}.ds-switch__input:not([readonly]):checked+.ds-switch__label .ds-switch__track{background-color:var(--ds-color-accent-base-default)}.ds-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)}.ds-switch__input:checked+.ds-switch__label .ds-switch__track .ds-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))}.ds-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%}.ds-switch--readonly .ds-switch__input[readonly]+.ds-switch__label .ds-switch__track{background-color:var(--ds-color-neutral-background-subtle);box-shadow:inset 0 0 0 2px var(--ds-color-neutral-border-subtle)}.ds-switch--readonly .ds-switch__input[readonly]+.ds-switch__label .ds-switch__track>.ds-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){.ds-switch__input:not([readonly],:disabled):hover+.ds-switch__label .ds-switch__track>.ds-switch__thumb{transform:translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height))*.2))}.ds-switch__input:not([readonly],:disabled):hover+.ds-switch__label{color:var(--ds-color-accent-text-subtle)}.ds-switch__input:not(:disabled,[readonly]):checked:hover+.ds-switch__label .ds-switch__track>.ds-switch__thumb{--dsc-switch-check_color:var(--ds-color-accent-base-hover);transform:translateX(calc(var(--dsc-switch-width) - var(--dsc-switch-height)))}.ds-switch__input:not(:checked,:disabled,[readonly]):hover+.ds-switch__label .ds-switch__track{background-color:var(--ds-color-neutral-border-strong)}.ds-switch__input:not(:disabled,[readonly]):checked:hover+.ds-switch__label .ds-switch__track{background-color:var(--ds-color-accent-base-hover)}}}
1
+ .ds-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}}.ds-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}.ds-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)}.ds-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}.ds-switch__readonly__icon{height:1.2em;width:1.2em}.ds-switch__label--right{grid-auto-flow:dense;grid-template-columns:1fr auto}.ds-switch__label--right .ds-switch__track{margin-right:0;order:1}.ds-switch__label--right+.ds-switch__description{padding-left:0}.ds-switch__input{cursor:pointer;height:2.75rem;margin:0;opacity:0;position:absolute;width:2.75rem;z-index:1}.ds-switch--readonly>.ds-switch__label{grid-template-columns:auto -webkit-min-content 1fr;grid-template-columns:auto min-content 1fr}.ds-switch--readonly>.ds-switch__label:where(.ds-switch__label--right){grid-template-columns:-webkit-min-content 1fr auto;grid-template-columns:min-content 1fr auto}.ds-switch--readonly>.ds-switch__input,.ds-switch--readonly>.ds-switch__label{cursor:default}.ds-switch--readonly>.ds-switch__description{margin-left:var(--ds-spacing-1)}.ds-switch--sm,.ds-switch--sm .ds-switch__label{min-height:var(--ds-sizing-6)}.ds-switch--md,.ds-switch--md .ds-switch__label{min-height:var(--ds-sizing-7)}.ds-switch--lg,.ds-switch--lg .ds-switch__label{min-height:var(--ds-sizing-8)}.ds-switch--sm{--dsc-switch-height:var(--ds-sizing-6);--dsc-switch-width:var(--ds-sizing-11)}.ds-switch--sm .ds-switch__input{left:-.25rem;top:-.25rem}.ds-switch--md{--dsc-switch-height:var(--ds-sizing-7);--dsc-switch-width:var(--ds-sizing-13)}.ds-switch--md .ds-switch__input{left:0;top:0}.ds-switch--lg{--dsc-switch-height:var(--ds-sizing-8);--dsc-switch-width:var(--ds-sizing-15)}.ds-switch--lg .ds-switch__input{left:0;top:.25rem}.ds-switch__label:has(.ds-switch__track:only-child){grid-template-columns:auto}.ds-switch__label:has(.ds-switch__track:only-child) .ds-switch__track{margin-right:0}.ds-switch:has(.ds-switch__input:disabled)>.ds-switch__label,.ds-switch__input:disabled{cursor:not-allowed}.ds-switch:has(.ds-switch__input:disabled)>.ds-switch__description,.ds-switch:has(.ds-switch__input:disabled)>.ds-switch__label{opacity:var(--ds-disabled-opacity)}.ds-switch:has(.ds-switch__input:focus-visible){--dsc-focus-border-width:3px;border-radius:var(--ds-border-radius-md);box-shadow:0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);outline:var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);outline-offset:var(--dsc-focus-border-width)}.ds-switch__input:not([readonly]):checked+.ds-switch__label .ds-switch__track{background-color:var(--ds-color-accent-base-default)}.ds-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)}.ds-switch__input:checked+.ds-switch__label .ds-switch__track .ds-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))}.ds-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%}.ds-switch--readonly .ds-switch__input[readonly]+.ds-switch__label .ds-switch__track{background-color:var(--ds-color-neutral-background-subtle);box-shadow:inset 0 0 0 2px var(--ds-color-neutral-border-subtle)}.ds-switch--readonly .ds-switch__input[readonly]+.ds-switch__label .ds-switch__track>.ds-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){.ds-switch__input:not([readonly],:disabled):hover+.ds-switch__label .ds-switch__track>.ds-switch__thumb{transform:translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height))*.2))}.ds-switch__input:not([readonly],:disabled):hover+.ds-switch__label{color:var(--ds-color-accent-text-subtle)}.ds-switch__input:not(:disabled,[readonly]):checked:hover+.ds-switch__label .ds-switch__track>.ds-switch__thumb{--dsc-switch-check_color:var(--ds-color-accent-base-hover);transform:translateX(calc(var(--dsc-switch-width) - var(--dsc-switch-height)))}.ds-switch__input:not(:checked,:disabled,[readonly]):hover+.ds-switch__label .ds-switch__track{background-color:var(--ds-color-neutral-border-strong)}.ds-switch__input:not(:disabled,[readonly]):checked:hover+.ds-switch__label .ds-switch__track{background-color:var(--ds-color-accent-base-hover)}}
package/dist/table.css CHANGED
@@ -1 +1 @@
1
- @layer ds.table{.ds-table{--dsc-table-padding:0;--dsc-table-border-radius:min(1rem,var(--ds-border-radius-md));border-collapse:initial;border-spacing:0;color:var(--ds-color-neutral-text-default);position:relative;text-align:left}.ds-table--sticky-header{overflow:auto}.ds-table--border .ds-table__row:last-of-type td{border-bottom:0}.ds-table--sm{--dsc-table-padding:var(--ds-spacing-1) var(--ds-spacing-3)}.ds-table--md{--dsc-table-padding:var(--ds-spacing-2) var(--ds-spacing-3)}.ds-table--lg{--dsc-table-padding:var(--ds-spacing-3) var(--ds-spacing-3)}.ds-table__head{box-sizing:border-box;z-index:0}.ds-table__head,.ds-table__header__cell{border-bottom:2px solid var(--ds-color-neutral-border-subtle);border-spacing:0;font-family:inherit}.ds-table__header__cell{background-color:var(--ds-color-neutral-background-default);padding:var(--dsc-table-padding)}.ds-table--sticky-header .ds-table__head .ds-table__header__cell{position:-webkit-sticky;position:sticky;top:0;z-index:1}.ds-table__header__cell--sortable{padding:0}.ds-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-family:inherit;gap:var(--ds-spacing-1);padding:var(--dsc-table-padding);position:relative;width:100%;z-index:2}.ds-table__header__cell--sorted button{background-color:var(--ds-color-neutral-background-subtle)}.ds-table__header__cell--sortable button:focus-visible{box-shadow:unset;outline-offset:-3px;z-index:3}.ds-table__header__cell--sortable button svg{font-size:1.2em}.ds-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)}.ds-table--zebra .ds-table__row{border-bottom:0}.ds-table--zebra tr:nth-child(2n):not(:hover) .ds-table__cell{background-color:var(--ds-color-neutral-background-subtle)}.ds-table--border{border:1px solid var(--ds-color-neutral-border-subtle);border-radius:var(--dsc-table-border-radius)}.ds-table--border .ds-table__head .ds-table__header__cell:first-of-type{border-top-left-radius:var(--dsc-table-border-radius);overflow:hidden}.ds-table--border .ds-table__head .ds-table__header__cell:last-of-type{border-top-right-radius:var(--dsc-table-border-radius);overflow:hidden}.ds-table--border .ds-table__row:last-of-type .ds-table__cell:first-of-type{border-bottom-left-radius:var(--dsc-table-border-radius);overflow:hidden}.ds-table--border .ds-table__row:last-of-type .ds-table__cell:last-of-type{border-bottom-right-radius:var(--dsc-table-border-radius);overflow:hidden}@media (hover:hover) and (pointer:fine){.ds-table__header__cell--sortable button:hover,.ds-table__row:hover .ds-table__cell{background-color:var(--ds-color-neutral-surface-default)}}}
1
+ .ds-table{--dsc-table-padding:0;--dsc-table-border-radius:min(1rem,var(--ds-border-radius-md));--dsc-table-border-color:var(--ds-color-neutral-border-subtle);--dsc-table-color:var(--ds-color-neutral-text-default);--dsc-table-header-cell-background:var(--ds-color-neutral-background-default);--dsc-table-header-sorted-background:var(--ds-color-neutral-background-subtle);--dsc-table-header-sorted-hover:var(--ds-color-neutral-surface-default);--dsc-table-cell-backround:var(--ds-color-neutral-background-default);--dsc-table-cell-zebra-background:var(--ds-color-neutral-background-subtle);--dsc-table-cell-hover-backround:var(--ds-color-neutral-surface-default);border-collapse:initial;border-spacing:0;color:var(--dsc-table-color);position:relative;text-align:left}.ds-table--sticky-header{overflow:auto}.ds-table--border .ds-table__row:last-of-type td{border-bottom:0}.ds-table--sm{--dsc-table-padding:var(--ds-spacing-1) var(--ds-spacing-3)}.ds-table--md{--dsc-table-padding:var(--ds-spacing-2) var(--ds-spacing-3)}.ds-table--lg{--dsc-table-padding:var(--ds-spacing-3) var(--ds-spacing-3)}.ds-table__head{box-sizing:border-box;z-index:0}.ds-table__head,.ds-table__header__cell{border-bottom:2px solid var(--dsc-table-border-color);border-spacing:0;font-family:inherit}.ds-table__header__cell{background-color:var(--dsc-table-header-cell-background);padding:var(--dsc-table-padding)}.ds-table--sticky-header .ds-table__head .ds-table__header__cell{position:-webkit-sticky;position:sticky;top:0;z-index:1}.ds-table__header__cell--sortable{padding:0}.ds-table__header__cell--sortable button{align-items:center;background-color:initial;border:none;color:var(--dsc-table-color);cursor:pointer;display:flex;font-family:inherit;gap:var(--ds-spacing-1);padding:var(--dsc-table-padding);position:relative;width:100%;z-index:2}.ds-table__header__cell--sorted button{background-color:var(--dsc-table-header-sorted-background)}.ds-table__header__cell--sortable button:focus-visible{box-shadow:unset;outline-offset:-3px;z-index:3}.ds-table__header__cell--sortable button svg{font-size:1.2em}.ds-table__cell{background-color:var(--dsc-table-cell-backround);border-bottom:1px solid var(--dsc-table-border-color);padding:var(--dsc-table-padding)}.ds-table--zebra .ds-table__row{border-bottom:0}.ds-table--zebra tr:nth-child(2n):not(:hover) .ds-table__cell{background-color:var(--dsc-table-cell-zebra-background)}.ds-table--border{border:1px solid var(--dsc-table-border-color);border-radius:var(--dsc-table-border-radius)}.ds-table--border .ds-table__head .ds-table__header__cell:first-of-type{border-top-left-radius:var(--dsc-table-border-radius);overflow:hidden}.ds-table--border .ds-table__head .ds-table__header__cell:last-of-type{border-top-right-radius:var(--dsc-table-border-radius);overflow:hidden}.ds-table--border .ds-table__row:last-of-type .ds-table__cell:first-of-type{border-bottom-left-radius:var(--dsc-table-border-radius);overflow:hidden}.ds-table--border .ds-table__row:last-of-type .ds-table__cell:last-of-type{border-bottom-right-radius:var(--dsc-table-border-radius);overflow:hidden}@media (hover:hover) and (pointer:fine){.ds-table__row:hover .ds-table__cell{background-color:var(--dsc-table-cell-hover-backround)}.ds-table__header__cell--sortable button:hover{background-color:var(--dsc-table-header-sorted-hover)}}
package/dist/tabs.css CHANGED
@@ -1 +1 @@
1
- @layer ds.tabs{.ds-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;font-family:inherit;gap:var(--ds-spacing-1);justify-content:center;padding:var(--ds-spacing-2) var(--ds-spacing-3);position:relative;text-align:center}.ds-tabs__content{color:var(--ds-color-neutral-text-default);padding:var(--ds-spacing-5)}.ds-tabs--sm .ds-tabs__tab{padding:var(--ds-spacing-2) var(--ds-spacing-4)}.ds-tabs--md .ds-tabs__tab{padding:var(--ds-spacing-3) var(--ds-spacing-5)}.ds-tabs--lg .ds-tabs__tab{padding:var(--ds-spacing-4) var(--ds-spacing-6)}.ds-tabs--sm .ds-tabs__content{padding:var(--ds-spacing-4)}.ds-tabs--md .ds-tabs__content{padding:var(--ds-spacing-5)}.ds-tabs--lg .ds-tabs__content{padding:var(--ds-spacing-6)}@media (hover:hover) and (pointer:fine){.ds-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)}}.ds-tabs__tab[aria-selected=true]{--dsc-tabs__tab-bottom-border-color:var(--ds-color-accent-base-default);color:var(--ds-color-accent-text-subtle)}.ds-tabs__tab:focus{z-index:2}.ds-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%}.ds-tabs__tablist{border-bottom:var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);display:flex;flex-direction:row;position:relative}}
1
+ .ds-tabs{--dsc-tabs__tab-bottom-border-color:transparent;--dsc-tabs-tab-padding:var(--ds-spacing-3) var(--ds-spacing-5);--dsc-tabs-tab-color:var(--ds-color-neutral-text-subtle);--dsc-tabs-content-padding:var(--ds-spacing-5);--dsc-tabs-content-color:var(--ds-color-neutral-text-default);--dsc-tabs-list-border-color:var(--ds-color-neutral-border-subtle)}.ds-tabs__tab{align-items:center;background-color:initial;border:none;border-radius:0;box-sizing:border-box;color:var(--dsc-tabs-tab-color);cursor:pointer;display:flex;flex-direction:row;font-family:inherit;gap:var(--ds-spacing-1);justify-content:center;padding:var(--dsc-tabs-tab-padding);position:relative;text-align:center}.ds-tabs__content{color:var(--dsc-tabs-content-color);padding:var(--dsc-tabs-content-padding)}.ds-tabs--sm{--dsc-tabs-tab-padding:var(--ds-spacing-2) var(--ds-spacing-4);--dsc-tabs-content-padding:var(--ds-spacing-4)}.ds-tabs--md{--dsc-tabs-tab-padding:var(--ds-spacing-3) var(--ds-spacing-5);--dsc-tabs-content-padding:var(--ds-spacing-5)}.ds-tabs--lg{--dsc-tabs-tab-padding:var(--ds-spacing-4) var(--ds-spacing-6);--dsc-tabs-content-padding:var(--ds-spacing-6)}@media (hover:hover) and (pointer:fine){.ds-tabs__tab:hover:not([aria-selected=true]){--dsc-tabs__tab-bottom-border-color:var(--ds-color-neutral-border-subtle);--dsc-tabs-tab-color:var(--ds-color-neutral-text-default)}}.ds-tabs__tab[aria-selected=true]{--dsc-tabs__tab-bottom-border-color:var(--ds-color-accent-base-default);--dsc-tabs-tab-color:var(--ds-color-accent-text-subtle)}.ds-tabs__tab:focus{z-index:2}.ds-tabs__tab:after{background-color:var(--dsc-tabs__tab-bottom-border-color);border-radius:var(--dsc-border-radius-full);bottom:0;content:"";display:block;height:3px;left:0;position:absolute;width:100%}.ds-tabs__tablist{border-bottom:var(--ds-border-width-default) solid var(--dsc-tabs-list-border-color);display:flex;flex-direction:row;position:relative}
package/dist/tag.css CHANGED
@@ -1 +1 @@
1
- @layer ds.tag{.ds-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:min(1rem,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}.ds-tag,.ds-tag--sm{padding:0 var(--ds-spacing-2)}.ds-tag--sm{min-height:var(--ds-sizing-7)}.ds-tag--md{min-height:var(--ds-sizing-8);padding:0 var(--ds-spacing-2)}.ds-tag--lg{min-height:var(--ds-sizing-9);padding:0 var(--ds-spacing-3)}.ds-tag--neutral{--dsc-tag-background:var(--ds-color-neutral-surface-default);--dsc-tag-color:var(--ds-color-neutral-text-default)}.ds-tag--info{--dsc-tag-background:var(--ds-color-info-surface-default);--dsc-tag-color:var(--ds-color-info-text-default)}.ds-tag--success{--dsc-tag-background:var(--ds-color-success-surface-default);--dsc-tag-color:var(--ds-color-success-text-default)}.ds-tag--warning{--dsc-tag-background:var(--ds-color-warning-surface-default);--dsc-tag-color:var(--ds-color-warning-text-default)}.ds-tag--danger{--dsc-tag-background:var(--ds-color-danger-surface-default);--dsc-tag-color:var(--ds-color-danger-text-default)}.ds-tag--brand1{--dsc-tag-background:var(--ds-color-brand1-surface-default);--dsc-tag-color:var(--ds-color-brand1-text-default)}.ds-tag--brand2{--dsc-tag-background:var(--ds-color-brand2-surface-default);--dsc-tag-color:var(--ds-color-brand2-text-default)}.ds-tag--brand3{--dsc-tag-background:var(--ds-color-brand3-surface-default);--dsc-tag-color:var(--ds-color-brand3-text-default)}}
1
+ .ds-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:min(1rem,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}.ds-tag,.ds-tag--sm{padding:0 var(--ds-spacing-2)}.ds-tag--sm{min-height:var(--ds-sizing-7)}.ds-tag--md{min-height:var(--ds-sizing-8);padding:0 var(--ds-spacing-2)}.ds-tag--lg{min-height:var(--ds-sizing-9);padding:0 var(--ds-spacing-3)}.ds-tag--neutral{--dsc-tag-background:var(--ds-color-neutral-surface-default);--dsc-tag-color:var(--ds-color-neutral-text-default)}.ds-tag--info{--dsc-tag-background:var(--ds-color-info-surface-default);--dsc-tag-color:var(--ds-color-info-text-default)}.ds-tag--success{--dsc-tag-background:var(--ds-color-success-surface-default);--dsc-tag-color:var(--ds-color-success-text-default)}.ds-tag--warning{--dsc-tag-background:var(--ds-color-warning-surface-default);--dsc-tag-color:var(--ds-color-warning-text-default)}.ds-tag--danger{--dsc-tag-background:var(--ds-color-danger-surface-default);--dsc-tag-color:var(--ds-color-danger-text-default)}.ds-tag--brand1{--dsc-tag-background:var(--ds-color-brand1-surface-default);--dsc-tag-color:var(--ds-color-brand1-text-default)}.ds-tag--brand2{--dsc-tag-background:var(--ds-color-brand2-surface-default);--dsc-tag-color:var(--ds-color-brand2-text-default)}.ds-tag--brand3{--dsc-tag-background:var(--ds-color-brand3-surface-default);--dsc-tag-color:var(--ds-color-brand3-text-default)}
package/dist/textarea.css CHANGED
@@ -1 +1 @@
1
- @layer ds.textarea{.ds-textarea{display:grid;gap:var(--ds-spacing-2)}.ds-textarea__readonly-icon{height:1.2em;width:1.2em}.ds-textarea__error-message:empty{display:none}.ds-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}.ds-textarea__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-spacing-2)*-1)}.ds-textarea__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:min(1rem,var(--ds-border-radius-md));box-sizing:border-box;color:var(--ds-color-neutral-text-default);flex:0 1 auto;font-family:inherit;min-height:2.5em;padding:var(--ds-spacing-3);position:relative;resize:vertical;width:100%}.ds-textarea--sm .ds-textarea__input{padding:var(--ds-spacing-2)}.ds-textarea--md .ds-textarea__input{padding:var(--ds-spacing-3)}.ds-textarea--lg .ds-textarea__input{padding:var(--ds-spacing-4)}.ds-textarea:has(.ds-textarea__input:disabled){opacity:var(--ds-disabled-opacity)}.ds-textarea__input:disabled{cursor:not-allowed}.ds-textarea__input:-moz-read-only{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.ds-textarea__input:read-only{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.ds-textarea--error>.ds-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){.ds-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
+ .ds-textarea{display:grid;gap:var(--ds-spacing-2)}.ds-textarea__readonly-icon{height:1.2em;width:1.2em}.ds-textarea__error-message:empty{display:none}.ds-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}.ds-textarea__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-spacing-2)*-1)}.ds-textarea__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:min(1rem,var(--ds-border-radius-md));box-sizing:border-box;color:var(--ds-color-neutral-text-default);flex:0 1 auto;font-family:inherit;min-height:2.5em;padding:var(--ds-spacing-3);position:relative;resize:vertical;width:100%}.ds-textarea--sm .ds-textarea__input{padding:var(--ds-spacing-2)}.ds-textarea--md .ds-textarea__input{padding:var(--ds-spacing-3)}.ds-textarea--lg .ds-textarea__input{padding:var(--ds-spacing-4)}.ds-textarea:has(.ds-textarea__input:disabled){opacity:var(--ds-disabled-opacity)}.ds-textarea__input:disabled{cursor:not-allowed}.ds-textarea__input:-moz-read-only{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.ds-textarea__input:read-only{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.ds-textarea--error>.ds-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){.ds-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 +1 @@
1
- @layer ds.textfield{.ds-textfield{display:grid;gap:var(--ds-spacing-2)}.ds-textfield__adornment{background:var(--ds-color-neutral-background-subtle);border-radius:var(--ds-border-radius-md);color:var(--ds-color-neutral-text-subtle);display:inline-block;padding:9px var(--ds-spacing-4)}.ds-textfield__adornment,.ds-textfield__input{border:1px solid var(--ds-color-neutral-border-default);box-sizing:border-box}.ds-textfield__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--ds-color-neutral-background-default);border-radius:var(--ds-border-radius-md);color:var(--ds-color-neutral-text-default);flex:0 1 auto;font-family:inherit;padding:0 var(--ds-spacing-3);position:relative;width:100%}.ds-textfield__input:disabled{cursor:not-allowed}.ds-textfield--readonly .ds-textfield__input{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.ds-textfield__field{align-items:stretch;border-radius:var(--ds-border-radius-md);display:flex}.ds-textfield__field>:first-child{border-bottom-left-radius:var(--ds-border-radius-md);border-top-left-radius:var(--ds-border-radius-md)}.ds-textfield__field>:last-child{border-bottom-right-radius:var(--ds-border-radius-md);border-top-right-radius:var(--ds-border-radius-md)}.ds-textfield--sm .ds-textfield__adornment{padding:var(--ds-sizing-2) var(--ds-spacing-3)}.ds-textfield--md .ds-textfield__adornment{padding:.65rem var(--ds-spacing-4)}.ds-textfield--lg .ds-textfield__adornment{padding:.85rem var(--ds-spacing-5)}.ds-textfield--sm .ds-textfield__field{height:var(--ds-sizing-10)}.ds-textfield--md .ds-textfield__field{height:var(--ds-sizing-12)}.ds-textfield--lg .ds-textfield__field{height:var(--ds-sizing-14)}.ds-textfield--sm .ds-textfield__input{padding:0 var(--ds-spacing-2)}.ds-textfield--md .ds-textfield__input{padding:0 var(--ds-spacing-3)}.ds-textfield--lg .ds-textfield__input{padding:0 var(--ds-spacing-4)}.ds-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}.ds-textfield__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-spacing-2)*-1)}.ds-textfield:has(.ds-textfield__input:disabled){opacity:var(--ds-disabled-opacity)}.ds-textfield--error .ds-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){.ds-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)}}.ds-textfield__input--with-prefix{border-bottom-left-radius:0;border-top-left-radius:0}.ds-textfield__input--with-suffix{border-bottom-right-radius:0;border-top-right-radius:0}.ds-textfield__prefix{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0}.ds-textfield__suffix{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.ds-textfield__readonly__icon{height:1.2em;width:1.2em}.ds-textfield__error-message:empty{display:none}}
1
+ .ds-textfield{display:grid;gap:var(--ds-spacing-2)}.ds-textfield__adornment{background:var(--ds-color-neutral-background-subtle);border-radius:var(--ds-border-radius-md);color:var(--ds-color-neutral-text-subtle);display:inline-block;padding:9px var(--ds-spacing-4)}.ds-textfield__adornment,.ds-textfield__input{border:1px solid var(--ds-color-neutral-border-default);box-sizing:border-box}.ds-textfield__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--ds-color-neutral-background-default);border-radius:var(--ds-border-radius-md);color:var(--ds-color-neutral-text-default);flex:0 1 auto;font-family:inherit;padding:0 var(--ds-spacing-3);position:relative;width:100%}.ds-textfield__input:disabled{cursor:not-allowed}.ds-textfield--readonly .ds-textfield__input{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.ds-textfield__field{align-items:stretch;border-radius:var(--ds-border-radius-md);display:flex}.ds-textfield__field>:first-child{border-bottom-left-radius:var(--ds-border-radius-md);border-top-left-radius:var(--ds-border-radius-md)}.ds-textfield__field>:last-child{border-bottom-right-radius:var(--ds-border-radius-md);border-top-right-radius:var(--ds-border-radius-md)}.ds-textfield--sm .ds-textfield__adornment{padding:var(--ds-sizing-2) var(--ds-spacing-3)}.ds-textfield--md .ds-textfield__adornment{padding:.65rem var(--ds-spacing-4)}.ds-textfield--lg .ds-textfield__adornment{padding:.85rem var(--ds-spacing-5)}.ds-textfield--sm .ds-textfield__field{height:var(--ds-sizing-10)}.ds-textfield--md .ds-textfield__field{height:var(--ds-sizing-12)}.ds-textfield--lg .ds-textfield__field{height:var(--ds-sizing-14)}.ds-textfield--sm .ds-textfield__input{padding:0 var(--ds-spacing-2)}.ds-textfield--md .ds-textfield__input{padding:0 var(--ds-spacing-3)}.ds-textfield--lg .ds-textfield__input{padding:0 var(--ds-spacing-4)}.ds-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}.ds-textfield__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-spacing-2)*-1)}.ds-textfield:has(.ds-textfield__input:disabled){opacity:var(--ds-disabled-opacity)}.ds-textfield--error .ds-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){.ds-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)}}.ds-textfield__input--with-prefix{border-bottom-left-radius:0;border-top-left-radius:0}.ds-textfield__input--with-suffix{border-bottom-right-radius:0;border-top-right-radius:0}.ds-textfield__prefix{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0;white-space:nowrap}.ds-textfield__suffix{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0;white-space:nowrap}.ds-textfield__readonly__icon{height:1.2em;width:1.2em}.ds-textfield__error-message:empty{display:none}
@@ -1 +1 @@
1
- @layer ds.togglegroup{.ds-togglegroup{--dsc-togglegroup-padding:var(--ds-spacing-1);--dsc-togglegroup-background:var(--ds-color-neutral-background-default);--dsc-togglegroup-border-color:var(--ds-color-neutral-border-default);background-color:var(--dsc-togglegroup-background);border:var(--dsc-togglegroup-border-color) solid var(--ds-border-width-default);border-radius:calc(var(--ds-border-radius-md) + var(--dsc-togglegroup-padding));height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ds-togglegroup__content{display:inline-grid;gap:var(--dsc-togglegroup-padding);grid-auto-columns:1fr;grid-auto-flow:column;padding:var(--dsc-togglegroup-padding)}.ds-togglegroup__input{display:none}.ds-togglegroup__item:focus-visible{z-index:1}}
1
+ .ds-togglegroup{--dsc-togglegroup-padding:var(--ds-spacing-1);--dsc-togglegroup-background:var(--ds-color-neutral-background-default);--dsc-togglegroup-border-color:var(--ds-color-neutral-border-default);background-color:var(--dsc-togglegroup-background);border:var(--dsc-togglegroup-border-color) solid var(--ds-border-width-default);border-radius:calc(var(--ds-border-radius-md) + var(--dsc-togglegroup-padding));height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ds-togglegroup__content{display:inline-grid;gap:var(--dsc-togglegroup-padding);grid-auto-columns:1fr;grid-auto-flow:column;padding:var(--dsc-togglegroup-padding)}.ds-togglegroup__input{display:none}.ds-togglegroup__item:focus-visible{z-index:1}
package/dist/tooltip.css CHANGED
@@ -1 +1 @@
1
- @layer ds.tooltip{.ds-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);padding:var(--ds-spacing-1) var(--ds-spacing-2)}.ds-tooltip__arrow{fill:var(--dsc-tooltip-background)}}
1
+ .ds-tooltip{--dsc-tooltip-background:var(--ds-color-neutral-text-default);--dsc-tooltip-color:var(--ds-color-neutral-background-default);--dsc-tooltip-padding:var(--ds-spacing-1) var(--ds-spacing-2);--dsc-tooltip-border-radius:var(--ds-border-radius-md);background:var(--dsc-tooltip-background);border-radius:var(--dsc-tooltip-border-radius);color:var(--dsc-tooltip-color);padding:var(--dsc-tooltip-padding)}.ds-tooltip__arrow{fill:var(--dsc-tooltip-background)}
@@ -0,0 +1 @@
1
+ .ds-sr-only{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ds-focus:focus-visible{--dsc-focus-border-width:3px;box-shadow:0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);outline:var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);outline-offset:var(--dsc-focus-border-width)}.ds-animate-height--closed,.ds-animate-height--openingOrClosing{overflow:hidden}.ds-animate-height--open .ds-animate-height__content{height:auto}.ds-animate-height--closed .ds-animate-height__content{display:none;height:0}
package/divider.css CHANGED
@@ -1,19 +1,17 @@
1
- @layer ds.divider {
2
- .ds-divider {
3
- border: none;
4
- border-top: 1px solid;
5
- width: 100%;
6
- }
1
+ .ds-divider {
2
+ border: none;
3
+ border-top: 1px solid;
4
+ width: 100%;
5
+ }
7
6
 
8
- .ds-divider--default {
9
- border-color: var(--ds-color-neutral-border-subtle);
10
- }
7
+ .ds-divider--default {
8
+ border-color: var(--ds-color-neutral-border-subtle);
9
+ }
11
10
 
12
- .ds-divider--strong {
13
- border-color: var(--ds-color-neutral-border-default);
14
- }
11
+ .ds-divider--strong {
12
+ border-color: var(--ds-color-neutral-border-default);
13
+ }
15
14
 
16
- .ds-divider--subtle {
17
- border-color: var(--ds-color-neutral-border-subtle);
18
- }
15
+ .ds-divider--subtle {
16
+ border-color: var(--ds-color-neutral-border-subtle);
19
17
  }
package/dropdownmenu.css CHANGED
@@ -1,47 +1,56 @@
1
- @layer ds.dropdownmenu {
2
- .ds-dropdownmenu {
3
- position: relative;
4
- padding: var(--ds-spacing-2);
5
- z-index: 1500;
6
- margin: 0;
7
- list-style: none;
8
- border-radius: min(1rem, var(--ds-border-radius-md));
9
- box-shadow: var(--ds-shadow-md);
10
- background-color: var(--ds-color-neutral-background-default);
11
- border: 1px solid var(--ds-color-neutral-border-subtle);
12
- }
13
-
14
- .ds-dropdownmenu--sm {
15
- min-width: 240px;
16
- padding: var(--ds-spacing-2);
17
- }
18
-
19
- .ds-dropdownmenu--md {
20
- min-width: 260px;
21
- padding: var(--ds-spacing-3) var(--ds-spacing-2);
22
- }
23
-
24
- .ds-dropdownmenu--lg {
25
- min-width: 280px;
26
- padding: var(--ds-spacing-4) var(--ds-spacing-2);
27
- }
28
-
29
- .ds-dropdownmenu > hr {
30
- border-color: var(--ds-color-neutral-border-subtle) !important;
31
- }
32
-
33
- .ds-dropdownmenu__item {
34
- justify-content: start;
35
- padding: 0 var(--ds-spacing-4);
36
- }
37
-
38
- .ds-dropdownmenu__section {
39
- margin: 0;
40
- padding: 0;
41
- list-style: none;
42
- }
43
-
44
- .ds-dropdownmenu__heading {
45
- padding: var(--ds-spacing-2) var(--ds-spacing-4);
46
- }
1
+ .ds-dropdownmenu {
2
+ --dsc-dropdownmenu-background: var(--ds-color-neutral-background-default);
3
+ --dsc-dropdownmenu-padding: var(--ds-spacing-2);
4
+ --dsc-dropdownmenu-border-radius: min(1rem, var(--ds-border-radius-md));
5
+ --dsc-dropdownmenu-border: 1px solid var(--ds-color-neutral-border-subtle);
6
+ --dsc-dropdownmenu-min-width: 260px;
7
+ --dsc-dropdownmenu-shadow: var(--ds-shadow-md);
8
+ --dsc-dropdownmenu-hr-border-color: var(--ds-color-neutral-border-subtle);
9
+ --dsc-dropdownmenu-item-padding: 0 var(--ds-spacing-4);
10
+ --dsc-dropdownmenu-header-padding: var(--ds-spacing-2) var(--ds-spacing-4);
11
+
12
+ position: relative;
13
+ padding: var(--dsc-dropdownmenu-padding);
14
+ z-index: 1500;
15
+ margin: 0;
16
+ list-style: none;
17
+ border-radius: var(--dsc-dropdownmenu-border-radius);
18
+ box-shadow: var(--dsc-dropdownmenu-shadow);
19
+ background-color: var(--dsc-dropdownmenu-background);
20
+ border: var(--dsc-dropdownmenu-border);
21
+ min-width: var(--dsc-dropdownmenu-min-width);
22
+ }
23
+
24
+ .ds-dropdownmenu--sm {
25
+ --dsc-dropdownmenu-padding: var(--ds-spacing-2);
26
+ --dsc-dropdownmenu-min-width: 240px;
27
+ }
28
+
29
+ .ds-dropdownmenu--md {
30
+ --dsc-dropdownmenu-padding: var(--ds-spacing-3) var(--ds-spacing-2);
31
+ --dsc-dropdownmenu-min-width: 260px;
32
+ }
33
+
34
+ .ds-dropdownmenu--lg {
35
+ --dsc-dropdownmenu-padding: var(--ds-spacing-4) var(--ds-spacing-2);
36
+ --dsc-dropdownmenu-min-width: 280px;
37
+ }
38
+
39
+ .ds-dropdownmenu > hr {
40
+ border-color: var(--dsc-dropdownmenu-hr-border-color) !important;
41
+ }
42
+
43
+ .ds-dropdownmenu__item {
44
+ justify-content: start;
45
+ padding: var(--dsc-dropdownmenu-item-padding);
46
+ }
47
+
48
+ .ds-dropdownmenu__section {
49
+ margin: 0;
50
+ padding: 0;
51
+ list-style: none;
52
+ }
53
+
54
+ .ds-dropdownmenu__heading {
55
+ padding: var(--dsc-dropdownmenu-header-padding);
47
56
  }
package/error-summary.css CHANGED
@@ -1,19 +1,23 @@
1
- @layer ds.errorsummary {
2
- .ds-error-summary {
3
- padding: var(--ds-spacing-6) var(--ds-spacing-8);
4
- border-radius: min(1rem, var(--ds-border-radius-lg));
5
- background-color: var(--ds-color-danger-surface-default);
6
- }
1
+ .ds-error-summary {
2
+ --dsc-errorsummary-background: var(--ds-color-danger-surface-default);
3
+ --dsc-errorsummary-border-radius: min(1rem, var(--ds-border-radius-lg));
4
+ --dsc-errorsummary-padding: var(--ds-spacing-6) var(--ds-spacing-8);
5
+ --dsc-errorsummary-link-color: var(--ds-color-neutral-text-default);
6
+ --dsc-errorsummary-heading-color: var(--ds-color-danger-text-default);
7
7
 
8
- .ds-error-summary a {
9
- color: var(--ds-color-neutral-text-default);
10
- }
8
+ padding: var(--dsc-errorsummary-padding);
9
+ border-radius: var(--dsc-errorsummary-border-radius);
10
+ background-color: var(--dsc-errorsummary-background);
11
+ }
12
+
13
+ .ds-error-summary a {
14
+ color: var(--dsc-errorsummary-link-color);
15
+ }
11
16
 
12
- .ds-error-summary li:last-of-type {
13
- margin-bottom: 0;
14
- }
17
+ .ds-error-summary li:last-of-type {
18
+ margin-bottom: 0;
19
+ }
15
20
 
16
- .ds-error-summary__heading {
17
- color: var(--ds-color-danger-text-default);
18
- }
21
+ .ds-error-summary__heading {
22
+ color: var(--dsc-errorsummary-heading-color);
19
23
  }
package/fieldset.css CHANGED
@@ -1,45 +1,43 @@
1
- @layer ds.fieldset {
2
- .ds-fieldset {
3
- margin: 0;
4
- padding: 0;
5
- border: 0;
6
- min-width: 0;
7
- }
8
-
9
- .ds-fieldset--spacing {
10
- display: flex;
11
- flex-direction: column;
12
- gap: var(--ds-spacing-2);
13
- }
14
-
15
- .ds-fieldset__description {
16
- color: var(--ds-color-neutral-text-subtle);
17
- margin-bottom: var(--ds-spacing-2);
18
- }
19
-
20
- .ds-fieldset__legend {
21
- display: contents;
22
- }
23
-
24
- .ds-fieldset--readonly .ds-fieldset__legend__content {
25
- display: inline-flex;
26
- }
27
-
28
- .ds-fieldset:not(:has(.ds-fieldset__description)) .ds-fieldset__legend__content {
29
- margin-bottom: var(--ds-spacing-4);
30
- }
31
-
32
- .ds-fieldset--readonly .ds-fieldset__readonly__icon {
33
- height: 1.2em;
34
- width: 1.2em;
35
- }
36
-
37
- .ds-fieldset:disabled .ds-fieldset__legend,
38
- .ds-fieldset:disabled .ds-fieldset__description {
39
- color: var(--ds-color-neutral-border-subtle);
40
- }
41
-
42
- .ds-fieldset__error-message {
43
- display: contents;
44
- }
1
+ .ds-fieldset {
2
+ margin: 0;
3
+ padding: 0;
4
+ border: 0;
5
+ min-width: 0;
6
+ }
7
+
8
+ .ds-fieldset--spacing {
9
+ display: flex;
10
+ flex-direction: column;
11
+ gap: var(--ds-spacing-2);
12
+ }
13
+
14
+ .ds-fieldset__description {
15
+ color: var(--ds-color-neutral-text-subtle);
16
+ margin-bottom: var(--ds-spacing-2);
17
+ }
18
+
19
+ .ds-fieldset__legend {
20
+ display: contents;
21
+ }
22
+
23
+ .ds-fieldset--readonly .ds-fieldset__legend__content {
24
+ display: inline-flex;
25
+ }
26
+
27
+ .ds-fieldset:not(:has(.ds-fieldset__description)) .ds-fieldset__legend__content {
28
+ margin-bottom: var(--ds-spacing-4);
29
+ }
30
+
31
+ .ds-fieldset--readonly .ds-fieldset__readonly__icon {
32
+ height: 1.2em;
33
+ width: 1.2em;
34
+ }
35
+
36
+ .ds-fieldset:disabled .ds-fieldset__legend,
37
+ .ds-fieldset:disabled .ds-fieldset__description {
38
+ color: var(--ds-color-neutral-border-subtle);
39
+ }
40
+
41
+ .ds-fieldset__error-message {
42
+ display: contents;
45
43
  }