@digdir/designsystemet-css 1.0.0-next.34 → 1.0.0-next.36

package/dist/search.css

@@ -1 +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)}}
+.ds-search{--dsc-search-padding-inline:var(--ds-spacing-2);--dsc-search-clear-padding:var(--ds-sizing-1);--dsc-search-clear-size:var(--ds-sizing-9);--dsc-search-clear-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");--dsc-search-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E");--dsc-search-icon-size:var(--ds-sizing-7);align-items:center;border-radius:var(--ds-border-radius-default);display:grid;grid-template-columns:1fr auto;position:relative;width:100%}.ds-search:not(:has(button:not([type=reset]))) input{padding-inline-start:calc(var(--dsc-search-icon-size) + var(--dsc-search-padding-inline)*2)}.ds-search:not(:has(button:not([type=reset]))):before{grid-area:1/1;margin-inline:var(--dsc-search-padding-inline);pointer-events:none;position:relative;z-index:2}.ds-search button:not([type=reset]):empty:before,.ds-search:not(:has(button:not([type=reset]))):before{background:currentcolor;content:"";height:var(--dsc-search-icon-size);-webkit-mask:var(--dsc-search-icon-url) center /contain no-repeat;mask:var(--dsc-search-icon-url) center /contain no-repeat;width:var(--dsc-search-icon-size)}.ds-search input{grid-area:1/1;padding-inline:var(--dsc-search-padding-inline)}:is(.ds-search input)::-webkit-search-cancel-button,:is(.ds-search input)::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.ds-search:has(input:-moz-placeholder-shown) button[type=reset]{display:none}.ds-search:has(input:is(:-moz-read-only,:disabled,[aria-disabled=true])) button[type=reset]{display:none}.ds-search:has(input:is(:read-only,:disabled,[aria-disabled=true])) button[type=reset],.ds-search:has(input:placeholder-shown) button[type=reset]{display:none}.ds-search:has(button[type=reset]) input{padding-inline-end:calc(var(--dsc-search-clear-size) + var(--dsc-search-padding-inline))}.ds-search button[type=reset]{--dsc-button-size:var(--dsc-search-clear-size);grid-area:1/1;justify-self:end;margin-inline:var(--dsc-search-padding-inline);padding:var(--dsc-search-clear-padding);position:relative;scale:.75;z-index:2}:is(.ds-search button[type=reset]):before{background:currentcolor;content:"";height:var(--dsc-search-clear-size);-webkit-mask:var(--dsc-search-clear-icon-url) center /contain no-repeat;mask:var(--dsc-search-clear-icon-url) center /contain no-repeat;width:var(--dsc-search-clear-size)}.ds-search button:not([type=reset]){border-bottom-left-radius:0;border-top-left-radius:0}:is(.ds-search button:not([type=reset])):not(:focus-visible){border-left:0}.ds-search:has(button:not([type=reset])):before{display:none}.ds-search:has(button:not([type=reset])) input{border-bottom-right-radius:0;border-top-right-radius:0}

package/dist/skeleton.css

@@ -1 +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:var(--dsc-skeleton-background);border-radius:min(1rem,var(--ds-border-radius-lg));box-sizing:border-box;display:block;height:1.3em;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.ds-skeleton[data-variant=circle]{aspect-ratio:1/1;border-radius:var(--ds-border-radius-full);width:1.3em}.ds-skeleton[data-variant=text]{border-radius:var(--ds-border-radius-full);height:auto;margin-block:calc(1lh - 1em)}.ds-skeleton[data-variant=text]:empty:before{content:"\00a0"}.ds-skeleton:not(:empty){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:not(:empty)>*{visibility:hidden}@media (prefers-reduced-motion:reduce){.ds-skeleton{--dsc-skeleton-animation-duration:1.6s}}@keyframes ds-skeleton-opacity-fade{to{opacity:.4}}
+.ds-skeleton{--dsc-skeleton-animation-duration:0.8s;--dsc-skeleton-animation:ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;--dsc-skeleton-background:var(--ds-color-neutral-surface-default);animation:var(--dsc-skeleton-animation);border-radius:var(--ds-border-radius-lg);box-sizing:border-box;display:block;height:1.3em;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.ds-skeleton[data-variant=circle]{aspect-ratio:1/1;border-radius:var(--ds-border-radius-full);width:1.3em}.ds-skeleton[data-variant=text]{border-radius:var(--ds-border-radius-full);-webkit-box-decoration-break:clone;box-decoration-break:clone;color:transparent;display:inline;font-size:.8em;letter-spacing:.1em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ds-skeleton[data-variant=text]:empty:before{content:attr(data-text);word-break:break-word}.ds-skeleton:not(:empty){color:transparent;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ds-skeleton:not(:empty)>*{visibility:hidden}@media (prefers-reduced-motion:reduce){.ds-skeleton{--dsc-skeleton-animation-duration:1.6s}}@keyframes ds-skeleton-opacity-fade{0%{background:var(--dsc-skeleton-background)}to{background:rgb(from var(--dsc-skeleton-background) r g b/.4)}}

package/dist/skiplink.css

@@ -1 +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-hover);-webkit-clip-path:none;clip-path:none;color:var(--ds-color-neutral-text-default);padding:var(--ds-spacing-4);text-decoration:none;white-space:inherit}.ds-skiplink__content{align-items:center;color:var(--dsc-link-color);display:inline-flex;gap:var(--ds-spacing-1);margin:0;text-decoration:underline;text-decoration-thickness:max(1px,.0625rem);text-underline-offset:max(5px,.25rem)}
+.ds-skiplink{--dsc-skiplink-padding:var(--ds-spacing-4);--dsc-skiplink-background-color:var(--ds-color-surface-hover);--dsc-skiplink-color:var(--ds-color-text-default);border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ds-skiplink:focus{display:grid;height:auto;margin:inherit;outline:0;overflow:visible;place-items:center;position:static;width:auto;clip:auto;background:var(--dsc-skiplink-background-color);box-sizing:border-box;-webkit-clip-path:none;clip-path:none;color:var(--dsc-skiplink-color);padding:var(--dsc-skiplink-padding);text-decoration:underline;text-decoration-thickness:max(1px,.0625rem);text-underline-offset:max(5px,.25rem);white-space:inherit}

package/dist/spinner.css

@@ -1 +1 @@
-.ds-spinner{--dsc-spinner-background:var(--ds-color-neutral-surface-default);--dsc-spinner-stroke:var(--ds-color-neutral-border-default);--dsc-spinner-size:var(--ds-sizing-11);--dsc-spinner-animation-duration:2s;animation:ds-spinner-rotate-animation linear infinite;animation-duration:var(--dsc-spinner-animation-duration);height:var(--dsc-spinner-size);width:var(--dsc-spinner-size)}.ds-spinner[data-color=accent]{--dsc-spinner-stroke:var(--ds-color-accent-base-default)}.ds-spinner[data-size="2xs"]{--dsc-spinner-size:var(--ds-sizing-3)}.ds-spinner[data-size=xs]{--dsc-spinner-size:var(--ds-sizing-5)}.ds-spinner[data-size=sm]{--dsc-spinner-size:var(--ds-sizing-8)}.ds-spinner[data-size=lg]{--dsc-spinner-size:var(--ds-sizing-15)}.ds-spinner[data-size=xl]{--dsc-spinner-size:var(--ds-sizing-22)}.ds-spinner__background{stroke:var(--dsc-spinner-background)}.ds-spinner__circle{stroke:var(--dsc-spinner-stroke);stroke-dasharray:1px,200px;animation:ds-spinner-stroke-animation ease-in-out infinite;animation-duration:var(--dsc-spinner-animation-duration);transform-origin:center}@media (prefers-reduced-motion:reduce){.ds-spinner{--dsc-spinner-animation-duration:6s}}@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)}}
+.ds-spinner{--dsc-spinner-background:var(--ds-color-surface-default);--dsc-spinner-stroke:var(--ds-color-border-default);--dsc-spinner-animation-duration:2s;animation:ds-spinner-rotate-animation linear infinite var(--dsc-spinner-animation-duration);box-sizing:border-box;font-size:var(--ds-sizing-11);height:1em;width:1em}.ds-spinner[data-size="2xs"]{font-size:.75rem}.ds-spinner[data-size=xs]{font-size:1.25rem}.ds-spinner[data-size=sm]{font-size:2rem}.ds-spinner[data-size=md]{font-size:2.75rem}.ds-spinner[data-size=lg]{font-size:3.75rem}.ds-spinner[data-size=xl]{font-size:5.5rem}.ds-spinner__background{stroke:var(--dsc-spinner-background)}.ds-spinner__circle{animation:ds-spinner-stroke-animation ease-in-out infinite var(--dsc-spinner-animation-duration);stroke-dasharray:1px,200px;stroke:var(--dsc-spinner-stroke);transform-origin:center}@media (prefers-reduced-motion:reduce){.ds-spinner{--dsc-spinner-animation-duration:6s}}@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}to{stroke-dasharray:1px,200px;stroke-dashoffset:-120px}}

package/dist/table.css

@@ -1 +1 @@
-.ds-table{--dsc-table-background--hover:var(--ds-color-neutral-surface-default);--dsc-table-background--zebra:var(--ds-color-neutral-background-subtle);--dsc-table-background:var(--ds-color-neutral-background-default);--dsc-table-border-radius:0;--dsc-table-border:1px solid var(--ds-color-neutral-border-subtle);--dsc-table-color:var(--ds-color-neutral-text-default);--dsc-table-header-background--hover:var(--ds-color-neutral-surface-default);--dsc-table-header-background--sorted:var(--ds-color-neutral-background-subtle);--dsc-table-header-background:var(--ds-color-neutral-background-default);--dsc-table-header-divider:2px solid var(--ds-color-neutral-border-subtle);--dsc-table-padding:var(--ds-spacing-2) var(--ds-spacing-3);--dsc-table-sort-size:var(--ds-spacing-6);border-collapse:initial;border-radius:var(--dsc-table-border-radius);border-spacing:0;color:var(--dsc-table-color);width:100%}.ds-table>:is(tbody,thead)>tr>:is(th,td){background:var(--dsc-table-background);border-bottom:var(--dsc-table-border);padding:var(--dsc-table-padding);text-align:inherit}:is(.ds-table>:is(tbody,thead)>tr>:is(th,td)):is(th){font-weight:500}.ds-table>thead>tr>:is(th,td){background:var(--dsc-table-header-background)}.ds-table>thead>tr:last-child>:is(th,td){border-bottom:var(--dsc-table-header-divider)}:is(.ds-table>:is(thead,tbody):first-child>tr:first-child>:is(th,td)):first-child{border-top-left-radius:var(--dsc-table-border-radius)}:is(.ds-table>:is(thead,tbody):first-child>tr:first-child>:is(th,td)):last-child{border-top-right-radius:var(--dsc-table-border-radius)}:is(.ds-table>:is(thead,tbody):last-child>tr:last-child>:is(th,td)):first-child{border-bottom-left-radius:var(--dsc-table-border-radius)}:is(.ds-table>:is(thead,tbody):last-child>tr:last-child>:is(th,td)):last-child{border-bottom-right-radius:var(--dsc-table-border-radius)}.ds-table>thead>tr>[aria-sort]{cursor:pointer;padding:0}:is(.ds-table>thead>tr>[aria-sort])>button{background:none;border:0;box-sizing:border-box;color:inherit;cursor:pointer;display:block;font:inherit;padding:var(--dsc-table-padding);text-align:inherit;width:100%}:is(:is(.ds-table>thead>tr>[aria-sort])>button):focus-visible{position:relative}:is(:is(.ds-table>thead>tr>[aria-sort])>button):after{background:currentcolor;content:"";display:inline-block;height:var(--dsc-table-sort-size);-webkit-mask:center/contain no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53 4.47a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 1.06 1.06L12 6.06l2.97 2.97a.75.75 0 1 0 1.06-1.06zm-3.5 10.5a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 1 0-1.06-1.06L12 17.94z'/%3E%3C/svg%3E");mask:center/contain no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53 4.47a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 1.06 1.06L12 6.06l2.97 2.97a.75.75 0 1 0 1.06-1.06zm-3.5 10.5a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 1 0-1.06-1.06L12 17.94z'/%3E%3C/svg%3E");vertical-align:middle;width:var(--dsc-table-sort-size)}[aria-sort=ascending]:is(.ds-table>thead>tr>[aria-sort])>button:after{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.47 7.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 1 1-1.06 1.06L12 9.56l-4.97 4.97a.75.75 0 0 1-1.06-1.06z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.47 7.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 1 1-1.06 1.06L12 9.56l-4.97 4.97a.75.75 0 0 1-1.06-1.06z'/%3E%3C/svg%3E")}[aria-sort=descending]:is(.ds-table>thead>tr>[aria-sort])>button:after{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E")}:is(.ds-table>thead>tr>[aria-sort]):not([aria-sort=none])>button{background:var(--dsc-table-header-background--sorted)}.ds-table[data-size=sm]{--dsc-table-padding:var(--ds-spacing-1) var(--ds-spacing-3)}.ds-table[data-size=lg]{--dsc-table-padding:var(--ds-spacing-3) var(--ds-spacing-3)}.ds-table[data-border]{--dsc-table-border-radius:min(1rem,var(--ds-border-radius-md));border:var(--dsc-table-border)}.ds-table[data-border]>:is(thead,tbody):last-child>tr:last-child>:is(th,td){border-bottom:0}.ds-table[data-sticky-header]{overflow:auto;position:relative}.ds-table[data-sticky-header]>thead>tr>:is(th,td){position:-webkit-sticky;position:sticky;top:0}.ds-table[data-zebra]>:is(thead,tbody)>tr:nth-child(2n)>:is(th,td){background:var(--dsc-table-background--zebra)}@media (hover:hover) and (pointer:fine){.ds-table[data-hover]>tbody>tr:hover>:is(th,td){background:var(--dsc-table-background--hover)}.ds-table>thead>tr>[aria-sort]:hover{background:var(--dsc-table-header-background--hover)}}
+.ds-table{--dsc-table-background--hover:var(--ds-color-neutral-surface-default);--dsc-table-background--zebra:var(--ds-color-neutral-background-subtle);--dsc-table-background:var(--ds-color-neutral-background-default);--dsc-table-border-radius:0;--dsc-table-border:1px solid var(--ds-color-neutral-border-subtle);--dsc-table-color:var(--ds-color-neutral-text-default);--dsc-table-header-background--hover:var(--ds-color-neutral-surface-default);--dsc-table-header-background--sorted:var(--ds-color-neutral-background-subtle);--dsc-table-header-background:var(--ds-color-neutral-background-default);--dsc-table-header-divider:2px solid var(--ds-color-neutral-border-subtle);--dsc-table-padding:var(--ds-spacing-2) var(--ds-spacing-3);--dsc-table-sort-size:var(--ds-spacing-6);border-collapse:initial;border-radius:var(--dsc-table-border-radius);border-spacing:0;box-sizing:border-box;color:var(--dsc-table-color);width:100%}.ds-table>:is(tbody,thead,tfoot)>tr>:is(th,td){background:var(--dsc-table-background);border-bottom:var(--dsc-table-border);padding:var(--dsc-table-padding);text-align:inherit}:is(.ds-table>:is(tbody,thead,tfoot)>tr>:is(th,td)):is(th){font-weight:500}.ds-table>thead>tr>:is(th,td){background:var(--dsc-table-header-background)}.ds-table>thead>tr:last-child>:is(th,td){border-bottom:var(--dsc-table-header-divider)}.ds-table>tfoot>tr>:is(th,td){background:var(--dsc-table-background);border-bottom:none;border-top:var(--dsc-table-border)}:is(.ds-table caption){font-size:1.3em;font-size:round(down,1.3em,.0625rem);font-weight:var(--ds-heading-md-font-weight);letter-spacing:var(--ds-heading-md-letter-spacing);line-height:var(--ds-heading-md-line-height);margin:0}[data-size="2xs"]:is(.ds-table caption){font-size:var(--ds-heading-2xs-font-size);font-weight:var(--ds-heading-2xs-font-weight);letter-spacing:var(--ds-heading-2xs-letter-spacing);line-height:var(--ds-heading-2xs-line-height)}[data-size=xs]:is(.ds-table caption){font-size:var(--ds-heading-xs-font-size);font-weight:var(--ds-heading-xs-font-weight);letter-spacing:var(--ds-heading-xs-letter-spacing);line-height:var(--ds-heading-xs-line-height)}[data-size=sm]:is(.ds-table caption){font-size:var(--ds-heading-sm-font-size);font-weight:var(--ds-heading-sm-font-weight);letter-spacing:var(--ds-heading-sm-letter-spacing);line-height:var(--ds-heading-sm-line-height)}[data-size=md]:is(.ds-table caption){font-size:var(--ds-heading-md-font-size)}[data-size=lg]:is(.ds-table caption){font-size:var(--ds-heading-lg-font-size);font-weight:var(--ds-heading-lg-font-weight);letter-spacing:var(--ds-heading-lg-letter-spacing);line-height:var(--ds-heading-lg-line-height)}[data-size=xl]:is(.ds-table caption){font-size:var(--ds-heading-xl-font-size);font-weight:var(--ds-heading-xl-font-weight);letter-spacing:var(--ds-heading-xl-letter-spacing);line-height:var(--ds-heading-xl-line-height)}[data-size="2xl"]:is(.ds-table caption){font-size:var(--ds-heading-2xl-font-size);font-weight:var(--ds-heading-2xl-font-weight);letter-spacing:var(--ds-heading-2xl-letter-spacing);line-height:var(--ds-heading-2xl-line-height)}.ds-table caption{text-align:inherit}:is(.ds-table>:is(thead,tbody):first-child>tr:first-child>:is(th,td)):first-child{border-top-left-radius:var(--dsc-table-border-radius)}:is(.ds-table>:is(thead,tbody):first-child>tr:first-child>:is(th,td)):last-child{border-top-right-radius:var(--dsc-table-border-radius)}:is(.ds-table>:is(thead,tbody,tfoot):last-child>tr:last-child>:is(th,td)):first-child{border-bottom-left-radius:var(--dsc-table-border-radius)}:is(.ds-table>:is(thead,tbody,tfoot):last-child>tr:last-child>:is(th,td)):last-child{border-bottom-right-radius:var(--dsc-table-border-radius)}.ds-table>thead>tr>[aria-sort]{cursor:pointer;padding:0}:is(.ds-table>thead>tr>[aria-sort])>button{background:none;border:0;box-sizing:border-box;color:inherit;cursor:pointer;display:block;font:inherit;padding:var(--dsc-table-padding);text-align:inherit;width:100%}:is(:is(.ds-table>thead>tr>[aria-sort])>button):focus-visible{position:relative}:is(:is(.ds-table>thead>tr>[aria-sort])>button):after{background:currentcolor;content:"";display:inline-block;height:var(--dsc-table-sort-size);-webkit-mask:center/contain no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53 4.47a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 1.06 1.06L12 6.06l2.97 2.97a.75.75 0 1 0 1.06-1.06zm-3.5 10.5a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 1 0-1.06-1.06L12 17.94z'/%3E%3C/svg%3E");mask:center/contain no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53 4.47a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 1.06 1.06L12 6.06l2.97 2.97a.75.75 0 1 0 1.06-1.06zm-3.5 10.5a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 1 0-1.06-1.06L12 17.94z'/%3E%3C/svg%3E");vertical-align:middle;width:var(--dsc-table-sort-size)}[aria-sort=ascending]:is(.ds-table>thead>tr>[aria-sort])>button:after{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.47 7.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 1 1-1.06 1.06L12 9.56l-4.97 4.97a.75.75 0 0 1-1.06-1.06z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.47 7.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 1 1-1.06 1.06L12 9.56l-4.97 4.97a.75.75 0 0 1-1.06-1.06z'/%3E%3C/svg%3E")}[aria-sort=descending]:is(.ds-table>thead>tr>[aria-sort])>button:after{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E")}:is(.ds-table>thead>tr>[aria-sort]):not([aria-sort=none])>button{background:var(--dsc-table-header-background--sorted)}.ds-table[data-border]{--dsc-table-border-radius:var(--ds-border-radius-md);border:var(--dsc-table-border)}.ds-table[data-border]>:is(thead,tbody):last-child>tr:last-child>:is(th,td){border-bottom:0}.ds-table[data-sticky-header]{overflow:auto;position:relative}.ds-table[data-sticky-header]>thead>tr>:is(th,td){position:-webkit-sticky;position:sticky;top:0;z-index:2}.ds-table[data-zebra]>:is(thead,tbody)>tr:nth-child(2n)>:is(th,td){background:var(--dsc-table-background--zebra)}@media (hover:hover) and (pointer:fine){.ds-table[data-hover]>tbody>tr:hover>:is(th,td){background:var(--dsc-table-background--hover)}.ds-table>thead>tr>[aria-sort]:hover{background:var(--dsc-table-header-background--hover)}}

package/dist/tabs.css

@@ -1 +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[data-size=sm]{--dsc-tabs-tab-padding:var(--ds-spacing-2) var(--ds-spacing-4);--dsc-tabs-content-padding:var(--ds-spacing-4)}.ds-tabs[data-size=lg]{--dsc-tabs-tab-padding:var(--ds-spacing-4) var(--ds-spacing-6);--dsc-tabs-content-padding:var(--ds-spacing-6)}.ds-tabs__panel{color:var(--dsc-tabs-content-color);padding:var(--dsc-tabs-content-padding)}.ds-tabs__tablist{border-bottom:var(--ds-border-width-default) solid var(--dsc-tabs-list-border-color)}.ds-tabs__tab,.ds-tabs__tablist{display:flex;flex-direction:row;position:relative}.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;font-family:inherit;gap:var(--ds-spacing-1);justify-content:center;padding:var(--dsc-tabs-tab-padding);text-align:center}.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-visible{box-shadow:var(--dsc-focus-boxShadow);outline:none}.ds-tabs__tab:focus-visible{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%}@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{--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__panel{color:var(--dsc-tabs-content-color);padding:var(--dsc-tabs-content-padding)}.ds-tabs__tablist{border-bottom:var(--ds-border-width-default) solid var(--dsc-tabs-list-border-color)}.ds-tabs__tab,.ds-tabs__tablist{display:flex;flex-direction:row;position:relative}.ds-tabs__tab{align-items:center;background:none;border:0;box-sizing:border-box;color:var(--dsc-tabs-tab-color);cursor:pointer;font-family:inherit;gap:var(--ds-spacing-1);justify-content:center;line-height:var(--ds-line-height-sm);margin:0;padding:var(--dsc-tabs-tab-padding);text-align:center}.ds-tabs__tab,.ds-tabs__tab:not([data-size]){font-size:inherit}.ds-tabs__tab :where(img,svg){flex-shrink:0;font-size:1.25em}.ds-tabs__tab[aria-selected=true]{--dsc-tabs-tab-bottom-border-color:var(--ds-color-base-default);--dsc-tabs-tab-color:var(--ds-color-text-subtle)}.ds-tabs__tab:focus-visible{box-shadow:var(--ds--focus,var(--dsc-focus-boxShadow));outline:var(--ds--focus,var(--dsc-focus-outline));outline-offset:var(--ds--focus,var(--dsc-focus-border-width))}.ds-tabs__tab:focus-visible *{--ds--focus: }.ds-tabs__tab:focus-visible{z-index:2}.ds-tabs__tab:after{background-color:var(--dsc-tabs-tab-bottom-border-color);bottom:0;content:"";display:block;height:.15em;left:0;position:absolute;width:100%}@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)}}

package/dist/tag.css

@@ -1 +1 @@
-.ds-tag{--dsc-tag-background:var(--ds-color-neutral-surface-default);--dsc-tag-color:var(--ds-color-neutral-text-default);--dsc-tag-min-height:var(--ds-sizing-8);align-items:center;background: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(--dsc-tag-min-height);padding:var(--dsc-tag-padding);width:-webkit-max-content;width:-moz-max-content;width:max-content;word-break:break-word}.ds-tag,.ds-tag[data-size=sm]{--dsc-tag-padding:0 var(--ds-spacing-2)}.ds-tag[data-size=sm]{--dsc-tag-min-height:var(--ds-sizing-7)}.ds-tag[data-size=lg]{--dsc-tag-padding:0 var(--ds-spacing-3);--dsc-tag-min-height:var(--ds-sizing-9)}.ds-tag[data-color=info]{--dsc-tag-background:var(--ds-color-info-surface-default);--dsc-tag-color:var(--ds-color-info-text-default)}.ds-tag[data-color=success]{--dsc-tag-background:var(--ds-color-success-surface-default);--dsc-tag-color:var(--ds-color-success-text-default)}.ds-tag[data-color=warning]{--dsc-tag-background:var(--ds-color-warning-surface-default);--dsc-tag-color:var(--ds-color-warning-text-default)}.ds-tag[data-color=danger]{--dsc-tag-background:var(--ds-color-danger-surface-default);--dsc-tag-color:var(--ds-color-danger-text-default)}.ds-tag[data-color=brand1]{--dsc-tag-background:var(--ds-color-brand1-surface-default);--dsc-tag-color:var(--ds-color-brand1-text-default)}.ds-tag[data-color=brand2]{--dsc-tag-background:var(--ds-color-brand2-surface-default);--dsc-tag-color:var(--ds-color-brand2-text-default)}.ds-tag[data-color=brand3]{--dsc-tag-background:var(--ds-color-brand3-surface-default);--dsc-tag-color:var(--ds-color-brand3-text-default)}
+.ds-tag{--dsc-tag-background:var(--ds-color-neutral-surface-default);--dsc-tag-color:var(--ds-color-neutral-text-default)}.ds-tag[data-color]{--dsc-tag-background:var(--ds-color-surface-default);--dsc-tag-color:var(--ds-color-text-default)}.ds-tag{--dsc-tag-min-height:var(--ds-sizing-8);--dsc-tag-padding:0 var(--ds-spacing-2);align-items:center;background:var(--dsc-tag-background);border-radius:var(--ds-border-radius-sm);box-sizing:border-box;color:var(--dsc-tag-color);display:inline-flex;line-height:var(--ds-line-height-sm);min-height:var(--dsc-tag-min-height);padding:var(--dsc-tag-padding);width:-webkit-max-content;width:-moz-max-content;width:max-content;word-break:break-word}

package/dist/textfield.css

@@ -1 +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}
+.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-border-strong);box-shadow:inset 0 0 0 1px var(--ds-color-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}

package/dist/togglegroup.css

@@ -1 +1 @@
-.ds-togglegroup{--dsc-togglegroup-background:var(--ds-color-neutral-background-default);--dsc-togglegroup-border:var(--ds-border-width-default) solid var(--ds-color-neutral-border-default);--dsc-togglegroup-padding:var(--ds-spacing-1);background:var(--dsc-togglegroup-background);border:var(--dsc-togglegroup-border);border-radius:calc(var(--ds-border-radius-md) + var(--dsc-togglegroup-padding));display:grid;gap:var(--dsc-togglegroup-padding);grid-auto-columns:1fr;grid-auto-flow:column;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:var(--dsc-togglegroup-padding);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}
+.ds-togglegroup{--dsc-togglegroup-background:var(--ds-color-neutral-background-default);--dsc-togglegroup-border:var(--ds-border-width-default) solid var(--ds-color-neutral-border-default);--dsc-togglegroup-padding:var(--ds-spacing-1);--dsc-togglegroup-border-radius:var(--ds-border-radius-default);background:var(--dsc-togglegroup-background);border:var(--dsc-togglegroup-border);border-radius:calc(var(--dsc-togglegroup-border-radius) + var(--dsc-togglegroup-padding));display:grid;gap:var(--dsc-togglegroup-padding);grid-auto-columns:1fr;grid-auto-flow:column;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:var(--dsc-togglegroup-padding);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ds-togglegroup button{border-radius:var(--dsc-togglegroup-border-radius)}

package/dist/tooltip.css

@@ -1 +1 @@
-.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)}
+.ds-tooltip{--dsc-tooltip-background:var(--ds-color-neutral-text-default);--dsc-tooltip-color:var(--ds-color-neutral-background-default);--dsc-tooltip-border-radius:var(--ds-border-radius-default);--dsc-tooltip-padding:var(--ds-spacing-1) var(--ds-spacing-2);--dsc-tooltip-arrow-size:var(--ds-spacing-2);border-radius:var(--dsc-tooltip-border-radius);color:var(--dsc-tooltip-color);line-height:var(--ds-line-height-sm);padding:var(--dsc-tooltip-padding)}.ds-tooltip,.ds-tooltip:before{background:var(--dsc-tooltip-background);box-sizing:border-box}.ds-tooltip:before{content:"";height:var(--dsc-tooltip-arrow-size);left:var(--ds-tooltip-arrow-x);position:absolute;rotate:45deg;top:var(--ds-tooltip-arrow-y);translate:-50% -50%;width:var(--dsc-tooltip-arrow-size)}

package/dist/validation-message.css

@@ -0,0 +1 @@
+.ds-validation-message{--dsc-validation-message-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill-rule='evenodd' d='M11.15 4.5a.98.98 0 0 1 1.7 0l8.52 14.74a.98.98 0 0 1-.85 1.48H3.48a.98.98 0 0 1-.85-1.48zM12 9.24a1 1 0 0 1 1 1V14a1 1 0 1 1-2 0v-3.75a1 1 0 0 1 1-1ZM12 18a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");--dsc-validation-message-icon-size:var(--ds-sizing-7);--dsc-validation-message-gap:var(--ds-spacing-2);margin:0;position:relative}.ds-validation-message[data-error]:not(:empty){color:var(--ds-color-danger-text-subtle);padding-inline-start:calc(var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-gap))}.ds-validation-message[data-error]:not(:empty):before{background:currentcolor;content:"";height:var(--dsc-validation-message-icon-size);margin-inline:calc((var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-gap))*-1);-webkit-mask:var(--dsc-validation-message-icon-url) center /contain no-repeat;mask:var(--dsc-validation-message-icon-url) center /contain no-repeat;position:absolute;translate:0 calc((1lh - var(--dsc-validation-message-icon-size))/2);width:var(--dsc-validation-message-icon-size)}

package/divider.css

@@ -3,6 +3,7 @@
 
   border-top: 1px solid var(--dsc-divider-color);
   border-width: 1px 0 0;
-  margin-block: .5em;
+  box-sizing: border-box;
+  margin-block: 0.5em;
   width: 100%;
 }

package/dropdown.css

@@ -1,45 +1,45 @@
 .ds-dropdown {
   --dsc-dropdown-padding: var(--ds-spacing-3) var(--ds-spacing-2);
-  --dsc-dropdown-min-width: 16rem;
-  --dsc-dropdown-item-padding: 0 var(--ds-spacing-4);
-  --dsc-dropdown-header-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  --dsc-dropdown-item-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  --dsc-dropdown-item-size: var(--ds-spacing-12);
 
-  padding: var(--dsc-dropdown-padding);
-  list-style: none;
-  border-radius: min(1rem, var(--ds-border-radius-md));
-  box-shadow: var(--ds-shadow-md);
   background-color: var(--ds-color-neutral-background-default);
+  border-radius: var(--ds-border-radius-md);
   border: 1px solid var(--ds-color-neutral-border-subtle);
-  min-width: var(--dsc-dropdown-min-width);
+  box-shadow: var(--ds-shadow-md);
+  box-sizing: border-box;
+  list-style: none;
+  min-width: 15em;
+  padding: var(--dsc-dropdown-padding);
 
   /* Remove popover arrow */
   &::before {
     display: none;
   }
 
-  &[data-size='sm'] {
-    --dsc-dropdown-padding: var(--ds-spacing-2);
-    --dsc-dropdown-min-width: 15rem;
-  }
-
-  &[data-size='lg'] {
-    --dsc-dropdown-padding: var(--ds-spacing-4) var(--ds-spacing-2);
-    --dsc-dropdown-min-width: 18rem;
-  }
-
-  & :is(a, button, [role='button']) {
-    justify-content: start;
+  & > :is(h2, h3, h4, h5, h6) {
+    align-items: center;
+    box-sizing: border-box;
+    color: var(--ds-color-neutral-text-subtle);
+    display: flex;
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+    min-height: var(--dsc-dropdown-item-size);
     padding: var(--dsc-dropdown-item-padding);
-    width: 100%;
   }
 
-  .ds-dropdown__list {
+  & > ul {
     margin: 0;
     padding: 0;
     list-style: none;
   }
 
-  .ds-dropdown__heading {
-    padding: var(--dsc-dropdown-header-padding);
+  & :is(a, button, [role='button']) {
+    justify-content: start;
+    padding: var(--dsc-dropdown-item-padding);
+    min-height: var(--dsc-dropdown-item-size);
+    width: 100%;
+    font-weight: var(--ds-font-weight-regular);
   }
 }

package/error-summary.css

@@ -1,16 +1,19 @@
 .ds-error-summary {
   --dsc-errorsummary-background: var(--ds-color-danger-surface-default);
-  --dsc-errorsummary-border-radius: min(1rem, var(--ds-border-radius-lg));
+  --dsc-errorsummary-border-radius: var(--ds-border-radius-lg);
   --dsc-errorsummary-padding: var(--ds-spacing-6) var(--ds-spacing-8);
   --dsc-errorsummary-link-color: var(--ds-color-neutral-text-default);
   --dsc-errorsummary-heading-color: var(--ds-color-danger-text-default);
 
-  padding: var(--dsc-errorsummary-padding);
-  border-radius: var(--dsc-errorsummary-border-radius);
   background-color: var(--dsc-errorsummary-background);
+  border-radius: var(--dsc-errorsummary-border-radius);
+  box-sizing: border-box;
+  padding: var(--dsc-errorsummary-padding);
 
   & :is(h1, h2, h3, h4, h5, h6) {
     color: var(--dsc-errorsummary-heading-color);
+    font-size: var(--ds-font-size-plus-1);
+    margin-bottom: var(--ds-spacing-2);
   }
 
   & a {

package/field.css

@@ -0,0 +1,124 @@
+.ds-field {
+  align-items: start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-2);
+
+  & [data-field='description'] {
+    color: var(--ds-color-neutral-text-subtle); /* TODO: Change to opacity or color-mix(currentColor, trasparent) to ensure contrast when parent element color changes? */
+  }
+
+  /**
+   * States
+   */
+  &:has([aria-disabled='true'], :disabled) > * {
+    cursor: not-allowed;
+    opacity: var(--ds-disabled-opacity);
+  }
+
+  &:has([aria-readonly='true'], [readonly]) label {
+    --dsc-label--readonly: ; /* Activate lock icon for label when readonly */
+  }
+
+  /**
+   * Toggle inputs
+   */
+  &:has(input:is([type='radio'], [type='checkbox'])) {
+    border-radius: var(--ds-border-radius-md);
+    display: grid;
+    grid-template-areas: 'input content';
+    grid-template-columns: auto 1fr;
+    row-gap: 0;
+    width: fit-content; /* Rather do display: grid + width: fit-content than display: inline-grid to encourage stacked radios */
+
+    & > * {
+      grid-column: content; /* Only allow input in column 1 */
+    }
+
+    & label {
+      --dsc-label--readonly: initial; /* Never show lock icon on toggle inputs */
+      font-weight: var(--ds-font-weight-regular);
+    }
+
+    & input {
+      grid-column: input; /* Always place input in column 1 */
+      grid-row: 1; /* Always place input in row 1 */
+    }
+
+    &:not(:has([readonly], [aria-disabled='true'], :disabled)) label {
+      cursor: pointer;
+    }
+
+    &:has(input:focus-visible) {
+      @composes ds-focus--visible from './base/base.css';
+    }
+
+    &:has(input:only-child) {
+      gap: 0; /* No gap only <input> with aria-label/aria-labelledby */
+    }
+
+    &[data-position='end'] {
+      grid-template-areas: 'content input';
+      grid-template-columns: 1fr auto;
+      width: auto;
+    }
+  }
+}
+
+/**
+ * Affix
+ */
+.ds-field-affixes {
+  --dsc-field-affix-border: 1px solid var(--ds-color-neutral-border-default);
+  --dsc-field-affix-padding-inline: var(--ds-spacing-4);
+
+  align-self: stretch; /* If ds-field is placed inside a flex container like ds-field, we need to fill width */
+  background: var(--ds-color-neutral-background-subtle);
+  border-radius: var(--ds-border-radius-md);
+  box-sizing: border-box;
+  color: var(--ds-color-neutral-text-subtle);
+  display: inline-flex; /* Using inline-flex to match native inline-block behaviour of <input> */
+  max-width: 100%;
+  white-space: nowrap;
+
+  &:has([size]) {
+    width: fit-content;
+  }
+
+  & .ds-field-affix {
+    align-items: center;
+    border: var(--dsc-field-affix-border);
+    display: flex;
+    flex-shrink: 0;
+    padding-inline: var(--dsc-field-affix-padding-inline);
+
+    &:first-child {
+      border-top-left-radius: inherit;
+      border-bottom-left-radius: inherit;
+      border-right: 0;
+    }
+
+    &:last-child {
+      border-top-right-radius: inherit;
+      border-bottom-right-radius: inherit;
+      border-left: 0;
+    }
+  }
+
+  & .ds-input {
+    border: var(--dsc-field-affix-border);
+    flex: 1 1 auto;
+
+    /* if it has affix after */
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    /* if it has affix before */
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}

package/fieldset.css

@@ -1,44 +1,26 @@
 .ds-fieldset {
-  --dsc-fieldset-icon-size: 1.2em;
-  --dsc-fieldset-gap: var(--ds-spacing-2);
-
-  margin: 0;
-  padding: 0;
   border: 0;
+  margin: 0;
   min-width: 0;
+  padding: 0;
 
-  & > :not(:last-child) {
-    margin-bottom: var(--ds-spacing-2); /* Use margin as fieldset does not play nice with display: flex */
-  }
-
-  & > legend {
-    display: inline-flex;
-  }
-
-  & > legend:empty {
-    display: none;
-  }
-
-  &[data-hidelegend] > legend,
-  &[data-hidelegend] > legend + p {
-    @composes ds-sr-only from '../css/utilities.css';
+  /* Add lock icon to legend when only containing readonly inputs */
+  &:has(input[readonly]):not(:has(input:not([readonly]))) > legend {
+    --dsc-label--readonly: ; /* Using technique https://css-tricks.com/the-css-custom-property-toggle-trick/ */
   }
 
-  &[data-readonly] > legend::before {
-    content: '';
-    background: currentcolor;
-    height: var(--dsc-fieldset-icon-size);
-    mask: center/contain no-repeat
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25A4.75 4.75 0 0 0 7.25 7v2.25H7A1.75 1.75 0 0 0 5.25 11v9c0 .41.34.75.75.75h12a.75.75 0 0 0 .75-.75v-9A1.75 1.75 0 0 0 17 9.25h-.25V7A4.75 4.75 0 0 0 12 2.25m3.25 7V7a3.25 3.25 0 0 0-6.5 0v2.25zM12 13a1.5 1.5 0 0 0-.75 2.8V17a.75.75 0 0 0 1.5 0v-1.2A1.5 1.5 0 0 0 12 13'/%3E%3C/svg%3E");
-    width: var(--dsc-fieldset-icon-size);
+  /* Stack everything that is not directly after legend */
+  & > * + * {
+    margin-block-start: var(--ds-spacing-4);
   }
 
   & > legend + p {
     color: var(--ds-color-neutral-text-subtle);
+    margin-block: var(--ds-spacing-1) 0;
   }
 
   &:disabled > legend,
   &:disabled > legend + p {
-    color: var(--ds-color-neutral-border-subtle);
+    opacity: var(--ds-disabled-opacity);
   }
 }

package/heading.css

@@ -0,0 +1,55 @@
+.ds-heading {
+  font-size: 1.3em; /* Fallback if not supporting round() */
+  font-size: round(down, 1.3em, 0.0625rem); /* Default to 130% */
+  font-weight: var(--ds-heading-md-font-weight);
+  letter-spacing: var(--ds-heading-md-letter-spacing);
+  line-height: var(--ds-heading-md-line-height);
+  margin: 0;
+
+  /* Using font-size to ensure consistent size when explicitly setting data-size */
+  &[data-size='2xs'] {
+    font-weight: var(--ds-heading-2xs-font-weight);
+    line-height: var(--ds-heading-2xs-line-height);
+    font-size: var(--ds-heading-2xs-font-size);
+    letter-spacing: var(--ds-heading-2xs-letter-spacing);
+  }
+
+  &[data-size='xs'] {
+    font-weight: var(--ds-heading-xs-font-weight);
+    line-height: var(--ds-heading-xs-line-height);
+    font-size: var(--ds-heading-xs-font-size);
+    letter-spacing: var(--ds-heading-xs-letter-spacing);
+  }
+
+  &[data-size='sm'] {
+    font-weight: var(--ds-heading-sm-font-weight);
+    line-height: var(--ds-heading-sm-line-height);
+    font-size: var(--ds-heading-sm-font-size);
+    letter-spacing: var(--ds-heading-sm-letter-spacing);
+  }
+
+  &[data-size='md'] {
+    font-size: var(--ds-heading-md-font-size);
+  }
+
+  &[data-size='lg'] {
+    font-weight: var(--ds-heading-lg-font-weight);
+    line-height: var(--ds-heading-lg-line-height);
+    font-size: var(--ds-heading-lg-font-size);
+    letter-spacing: var(--ds-heading-lg-letter-spacing);
+  }
+
+  &[data-size='xl'] {
+    font-weight: var(--ds-heading-xl-font-weight);
+    line-height: var(--ds-heading-xl-line-height);
+    font-size: var(--ds-heading-xl-font-size);
+    letter-spacing: var(--ds-heading-xl-letter-spacing);
+  }
+
+  &[data-size='2xl'] {
+    font-weight: var(--ds-heading-2xl-font-weight);
+    line-height: var(--ds-heading-2xl-line-height);
+    font-size: var(--ds-heading-2xl-font-size);
+    letter-spacing: var(--ds-heading-2xl-letter-spacing);
+  }
+}

package/helptext.css

@@ -3,10 +3,9 @@
   --dsc-helptext-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41V9.5H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5C5.8 4.65 6 4.2 6 3.7 6 2.66 5.1 1.83 4 1.83c-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --dsc-helptext-size: var(--ds-sizing-7);
 
-  @composes ds-focus from '../css/utilities.css';
-
   border-radius: var(--ds-border-radius-full);
-  border: 2px solid;
+  border: max(1px, calc(var(--ds-spacing-1) / 2)) solid; /* Allow border-width to grow with font-size */
+  box-sizing: border-box;
   height: var(--dsc-helptext-size);
   min-height: 0;
   min-width: 0;
@@ -22,9 +21,7 @@
     mask-image: var(--dsc-helptext-icon-url);
     mask-position: center;
     mask-repeat: no-repeat;
-    mask-size:
-      var(--dsc-helptext-icon-size) var(--dsc-helptext-icon-size),
-      cover;
+    mask-size: var(--dsc-helptext-icon-size) var(--dsc-helptext-icon-size), cover;
     scale: 1.1; /* Hide tiny half pixel rendeing bug */
     width: 100%;
     height: 100%;
@@ -34,14 +31,6 @@
     mask-image: var(--dsc-helptext-icon-url), linear-gradient(currentcolor, currentcolor); /* Cut icon out of currentcolor surface */
   }
 
-  &[data-size='sm'] {
-    --dsc-helptext-size: var(--ds-sizing-6);
-  }
-
-  &[data-size='lg'] {
-    --dsc-helptext-size: var(--ds-sizing-8);
-  }
-
   @media print {
     display: none;
   }