@vonage/vivid 3.45.0 → 3.47.0

package/shared/definition13.js

@@ -505,7 +505,7 @@ _curry1(function isEmpty(x) {
 
 const isEmpty$1 = isEmpty;
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\nol {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n[role=grid i] {\n  position: relative;\n  z-index: 0;\n  display: grid;\n  margin: auto;\n  grid-template-areas: \". column-headers\" \"row-headers calendar\";\n  grid-template-columns: min-content auto;\n  inline-size: max(100%, 500px);\n  min-inline-size: 880px;\n}\n\n.row-headers {\n  display: grid;\n  grid-area: row-headers;\n  grid-template-rows: repeat(24, 1fr);\n  margin-inline-end: 2px;\n}\n.row-headers > [role=rowheader i] {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n.row-headers > [role=rowheader i] > time {\n  font: var(--vvd-typography-base-condensed);\n  font-size: small;\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.calendar-row {\n  display: contents;\n}\n\n.calendar-grid-presentation {\n  display: grid;\n  overflow: hidden;\n  background: var(--vvd-color-surface-2dp);\n  border-radius: 6px;\n  counter-reset: listing;\n  filter: var(--vvd-shadow-surface-2dp);\n  gap: 1px;\n  grid-area: calendar;\n  grid-auto-flow: column;\n  grid-template: repeat(24, 1fr)/repeat(7, 1fr);\n}\n\n.hours {\n  display: contents;\n}\n.hours > [role=listitem i] {\n  position: relative;\n  grid-column: 1/8;\n  grid-row: var(--row);\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  pointer-events: none;\n}\n.hours > [role=listitem i]:not(:first-child)::after {\n  position: absolute;\n  border-block-end: var(--vvd-color-neutral-100) 1px solid;\n  content: \"\";\n  inline-size: 100%;\n  margin-block-start: -1px;\n}\n.hours > [role=listitem i]:nth-child(24n+1) {\n  --row: 1;\n}\n.hours > [role=listitem i]:nth-child(24n+2) {\n  --row: 2;\n}\n.hours > [role=listitem i]:nth-child(24n+3) {\n  --row: 3;\n}\n.hours > [role=listitem i]:nth-child(24n+4) {\n  --row: 4;\n}\n.hours > [role=listitem i]:nth-child(24n+5) {\n  --row: 5;\n}\n.hours > [role=listitem i]:nth-child(24n+6) {\n  --row: 6;\n}\n.hours > [role=listitem i]:nth-child(24n+7) {\n  --row: 7;\n}\n.hours > [role=listitem i]:nth-child(24n+8) {\n  --row: 8;\n}\n.hours > [role=listitem i]:nth-child(24n+9) {\n  --row: 9;\n}\n.hours > [role=listitem i]:nth-child(24n+10) {\n  --row: 10;\n}\n.hours > [role=listitem i]:nth-child(24n+11) {\n  --row: 11;\n}\n.hours > [role=listitem i]:nth-child(24n+12) {\n  --row: 12;\n}\n.hours > [role=listitem i]:nth-child(24n+13) {\n  --row: 13;\n}\n.hours > [role=listitem i]:nth-child(24n+14) {\n  --row: 14;\n}\n.hours > [role=listitem i]:nth-child(24n+15) {\n  --row: 15;\n}\n.hours > [role=listitem i]:nth-child(24n+16) {\n  --row: 16;\n}\n.hours > [role=listitem i]:nth-child(24n+17) {\n  --row: 17;\n}\n.hours > [role=listitem i]:nth-child(24n+18) {\n  --row: 18;\n}\n.hours > [role=listitem i]:nth-child(24n+19) {\n  --row: 19;\n}\n.hours > [role=listitem i]:nth-child(24n+20) {\n  --row: 20;\n}\n.hours > [role=listitem i]:nth-child(24n+21) {\n  --row: 21;\n}\n.hours > [role=listitem i]:nth-child(24n+22) {\n  --row: 22;\n}\n.hours > [role=listitem i]:nth-child(24n+23) {\n  --row: 23;\n}\n.hours > [role=listitem i]:nth-child(24n+24) {\n  --row: 24;\n}\n\n[role=gridcell i] {\n  display: grid;\n  gap: 1px;\n  grid-auto-flow: column;\n}\n\n[role=gridcell i],\n[role=columnheader i],\n[role=columnheader i] [role=button i] {\n  position: relative;\n}\n[role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n  position: absolute;\n  z-index: -1;\n  background-color: var(--vvd-color-information-400);\n  content: \"\";\n}\n@supports (inset: 0) {\n  [role=gridcell i]::before,\n  [role=columnheader i]::before,\n  [role=columnheader i] [role=button i]::before {\n    inset: 0;\n  }\n}\n@supports not (inset: 0) {\n  [role=gridcell i]::before,\n  [role=columnheader i]::before,\n  [role=columnheader i] [role=button i]::before {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n}\n[role=gridcell i]:focus,\n[role=columnheader i]:focus,\n[role=columnheader i] [role=button i]:focus {\n  outline: none;\n}\n[role=gridcell i]:not(:focus-visible)::before,\n[role=columnheader i]:not(:focus-visible)::before,\n[role=columnheader i] [role=button i]:not(:focus-visible)::before {\n  display: none;\n}\n\n.columns {\n  display: contents;\n}\n.columns > [role=gridcell i] {\n  position: relative;\n  grid-column: var(--column);\n  grid-row: 1/25;\n}\n.columns > [role=gridcell i]:nth-child(1) {\n  --column: 1;\n}\n.columns > [role=gridcell i]:nth-child(2) {\n  --column: 2;\n}\n.columns > [role=gridcell i]:nth-child(3) {\n  --column: 3;\n}\n.columns > [role=gridcell i]:nth-child(4) {\n  --column: 4;\n}\n.columns > [role=gridcell i]:nth-child(5) {\n  --column: 5;\n}\n.columns > [role=gridcell i]:nth-child(6) {\n  --column: 6;\n}\n.columns > [role=gridcell i]:nth-child(7) {\n  --column: 7;\n}\n.columns > [role=gridcell i]:not(:first-child)::after {\n  position: absolute;\n  block-size: 100%;\n  border-inline-end: var(--vvd-color-neutral-100) 1px solid;\n  content: \"\";\n  margin-inline-start: -1px;\n}\n\n.column-headers {\n  display: grid;\n  grid-area: column-headers;\n  grid-template-columns: repeat(7, 1fr);\n}\n.column-headers [role=columnheader i] h2 {\n  display: grid;\n  align-items: baseline;\n  margin: 0;\n  font: var(--vvd-typography-heading-4);\n  grid-template-columns: 1fr auto 1fr;\n}\n.column-headers [role=columnheader i] h2 > em {\n  font: inherit;\n  inline-size: min-content;\n}\n@supports (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    left: 0;\n  }\n}\n.column-headers [role=columnheader i] h2 > small {\n  font: var(--vvd-typography-base-condensed);\n  text-transform: uppercase;\n}";
+const styles = "ol{padding:0;margin:0;list-style:none}[role=grid i]{position:relative;z-index:0;display:grid;margin:auto;grid-template-areas:\". column-headers\" \"row-headers calendar\";grid-template-columns:min-content auto;inline-size:max(100%,500px);min-inline-size:880px}.row-headers{display:grid;grid-area:row-headers;grid-template-rows:repeat(24,1fr);margin-inline-end:2px}.row-headers>[role=rowheader i]{display:flex;align-items:flex-end;justify-content:flex-end}.row-headers>[role=rowheader i]>time{font:var(--vvd-typography-base-condensed);font-size:small;line-height:1;text-transform:uppercase;white-space:nowrap}.calendar-row{display:contents}.calendar-grid-presentation{display:grid;overflow:hidden;background:var(--vvd-color-surface-2dp);border-radius:8px;counter-reset:listing;filter:var(--vvd-shadow-surface-2dp);gap:1px;grid-area:calendar;grid-auto-flow:column;grid-template:repeat(24,1fr)/repeat(7,1fr)}.hours{display:contents}.hours>[role=listitem i]{position:relative;grid-column:1/8;grid-row:var(--row);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));pointer-events:none}.hours>[role=listitem i]:not(:first-child):after{position:absolute;border-block-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";inline-size:100%;margin-block-start:-1px}.hours>[role=listitem i]:nth-child(24n+1){--row: 1}.hours>[role=listitem i]:nth-child(24n+2){--row: 2}.hours>[role=listitem i]:nth-child(24n+3){--row: 3}.hours>[role=listitem i]:nth-child(24n+4){--row: 4}.hours>[role=listitem i]:nth-child(24n+5){--row: 5}.hours>[role=listitem i]:nth-child(24n+6){--row: 6}.hours>[role=listitem i]:nth-child(24n+7){--row: 7}.hours>[role=listitem i]:nth-child(24n+8){--row: 8}.hours>[role=listitem i]:nth-child(24n+9){--row: 9}.hours>[role=listitem i]:nth-child(24n+10){--row: 10}.hours>[role=listitem i]:nth-child(24n+11){--row: 11}.hours>[role=listitem i]:nth-child(24n+12){--row: 12}.hours>[role=listitem i]:nth-child(24n+13){--row: 13}.hours>[role=listitem i]:nth-child(24n+14){--row: 14}.hours>[role=listitem i]:nth-child(24n+15){--row: 15}.hours>[role=listitem i]:nth-child(24n+16){--row: 16}.hours>[role=listitem i]:nth-child(24n+17){--row: 17}.hours>[role=listitem i]:nth-child(24n+18){--row: 18}.hours>[role=listitem i]:nth-child(24n+19){--row: 19}.hours>[role=listitem i]:nth-child(24n+20){--row: 20}.hours>[role=listitem i]:nth-child(24n+21){--row: 21}.hours>[role=listitem i]:nth-child(24n+22){--row: 22}.hours>[role=listitem i]:nth-child(24n+23){--row: 23}.hours>[role=listitem i]:nth-child(24n+24){--row: 24}[role=gridcell i]{display:grid;gap:1px;grid-auto-flow:column}[role=gridcell i],[role=columnheader i],[role=columnheader i] [role=button i]{position:relative}[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{position:absolute;z-index:-1;background-color:var(--vvd-color-information-400);content:\"\"}@supports (inset: 0){[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{inset:0}}@supports not (inset: 0){[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{inset:0}}[role=gridcell i]:focus,[role=columnheader i]:focus,[role=columnheader i] [role=button i]:focus{outline:none}[role=gridcell i]:not(:focus-visible):before,[role=columnheader i]:not(:focus-visible):before,[role=columnheader i] [role=button i]:not(:focus-visible):before{display:none}.columns{display:contents}.columns>[role=gridcell i]{position:relative;grid-column:var(--column);grid-row:1/25}.columns>[role=gridcell i]:nth-child(1){--column: 1}.columns>[role=gridcell i]:nth-child(2){--column: 2}.columns>[role=gridcell i]:nth-child(3){--column: 3}.columns>[role=gridcell i]:nth-child(4){--column: 4}.columns>[role=gridcell i]:nth-child(5){--column: 5}.columns>[role=gridcell i]:nth-child(6){--column: 6}.columns>[role=gridcell i]:nth-child(7){--column: 7}.columns>[role=gridcell i]:not(:first-child):after{position:absolute;block-size:100%;border-inline-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";margin-inline-start:-1px}.column-headers{display:grid;grid-area:column-headers;grid-template-columns:repeat(7,1fr)}.column-headers [role=columnheader i] h2{display:grid;align-items:baseline;margin:0;font:var(--vvd-typography-heading-4);grid-template-columns:1fr auto 1fr}.column-headers [role=columnheader i] h2>em{font:inherit;inline-size:min-content}@supports (inset: 0){.column-headers [role=columnheader i] h2>em{inset-inline-start:0}}@supports not (inset: 0){.column-headers [role=columnheader i] h2>em{left:0}}.column-headers [role=columnheader i] h2>small{font:var(--vvd-typography-base-condensed);text-transform:uppercase}\n";
 
 const ARROW_UP = "ArrowUp";
 const ARROW_RIGHT = "ArrowRight";

package/shared/definition14.js

@@ -7,7 +7,7 @@ import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n  display: flex;\n}\n\n.base {\n  border-radius: 6px;\n  inline-size: 100%;\n  text-align: start;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: 100%;\n  border-radius: inherit;\n  color: var(--vvd-color-canvas-text);\n}\n\n.main-content {\n  display: flex;\n  flex-flow: column;\n  padding: 24px;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 8px;\n}\n.header-content {\n  flex: 1;\n}\n.header-wrapper {\n  display: flex;\n  gap: 8px;\n}\n.header-headline, .header-subtitle {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n.header-headline {\n  font: var(--vvd-typography-heading-4);\n  -webkit-line-clamp: var(--headline-line-clamp);\n}\n.header-subtitle {\n  font: var(--vvd-typography-base);\n  -webkit-line-clamp: var(--subtitle-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subtitle,\n.text {\n  color: var(--vvd-color-neutral-600);\n  font: var(--vvd-typography-base);\n}\n\n.text {\n  padding-right: 8px;\n  margin-top: 12px;\n}\n\n.footer {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding-bottom: 24px;\n  margin-top: auto;\n  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n  flex-shrink: 0;\n  align-self: baseline;\n  margin-block-start: 4px;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n  flex-shrink: 0;\n  align-self: flex-start;\n  margin-block-start: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: auto;\n}";
+const styles = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.wrapper{display:flex;overflow:hidden;flex-flow:column;block-size:100%;border-radius:inherit;color:var(--vvd-color-canvas-text)}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline-end:-8px;margin-inline-start:auto}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition15.js

@@ -98,7 +98,7 @@ __decorate([
     observable
 ], Checkbox$1.prototype, "indeterminate", void 0);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  vertical-align: middle;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.base {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-checkbox-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-checkbox-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-checkbox-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-checkbox-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-checkbox-cta-backdrop=var(--vvd-color-cta-50)] */\n  --_connotation-color-backdrop: var(--vvd-checkbox-cta-backdrop, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-checkbox-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-checkbox-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-checkbox-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-checkbox-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-checkbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-checkbox-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-checkbox-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-checkbox-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text));\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n@supports selector(:focus-visible) {\n  .base:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  pointer-events: none;\n}\n\n.control {\n  position: relative;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n\n.indicator {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) - 4px);\n}\n.base:not(.checked) .indicator.checkmark {\n  display: none;\n}\n\n.base.checked .indicator.minus, .base:not(.indeterminate) .indicator.minus {\n  display: none;\n}\n\nlabel {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  color: var(--vvd-color-canvas-text);\n  column-gap: 4px;\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n.hide-label label {\n  display: none;\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.base:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) * 0.6);\n  line-height: 1;\n}\n\n.message {\n  margin-block-start: 4px;\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}";
+const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-backdrop: var(--vvd-checkbox-cta-backdrop, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-backdrop: var(--vvd-checkbox-accent-backdrop, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(:checked,.checked):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(:checked,.checked):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}@supports selector(:focus-visible){.base:focus-visible{outline:none}}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:4px;box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:4px}.base:not(:focus-visible) .focus-indicator{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition16.js

@@ -621,7 +621,7 @@ __decorate([
 applyMixins(DelegatesARIACombobox, DelegatesARIAListbox);
 applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n  position: relative;\n}\n\n.base {\n  --_text-field-gutter-end: 44px;\n}\n\n.icon {\n  inset-inline-end: 16px;\n  inset-inline-start: unset;\n}\n:not(.disabled) .icon {\n  cursor: pointer;\n}\n.disabled .icon {\n  cursor: not-allowed;\n}\n\n.listbox {\n  padding: 4px;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  contain: paint;\n}\n.listbox {\n  /* @cssprop [--vvd-combobox-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-combobox-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-combobox-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-combobox-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-combobox-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-combobox-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-combobox-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-combobox-accent-soft, var(--vvd-color-neutral-100));\n}\n.listbox {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.listbox.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.listbox:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.listbox:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n\n::part(popup-base) {\n  inline-size: 100%;\n}";
+const styles = ":host{position:relative}.base{--_text-field-gutter-end: 44px}.icon{inset-inline-end:16px;inset-inline-start:unset}:not(.disabled) .icon{cursor:pointer}.disabled .icon{cursor:not-allowed}.listbox{padding:4px;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint}.listbox{--_connotation-color-backdrop: var(--vvd-combobox-accent-backdrop, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-combobox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-combobox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-combobox-accent-soft, var(--vvd-color-neutral-100))}.listbox{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.listbox.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.listbox:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.listbox:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}::part(popup-base){inline-size:100%}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition17.js

@@ -2,7 +2,7 @@ import { a as iconRegistries } from './definition26.js';
 import { F as FoundationElement, _ as __decorate, a as attr, o as observable, D as DOM, h as html, O as Observable, r as registerFactory } from './index.js';
 import { d as keyEnd, g as keyHome, h as keyArrowRight, i as keyArrowLeft, j as keyPageDown, l as keyPageUp, f as keyArrowDown, e as keyArrowUp, b as keyEscape, m as keyFunction2, k as keyEnter } from './key-codes.js';
 import { R as RepeatDirective } from './repeat.js';
-import { e as elements, s as slotted } from './slotted.js';
+import { s as slotted, e as elements } from './slotted.js';
 import { c as children } from './children.js';
 import { I as Icon } from './icon.js';
 import { f as focusTemplateFactory } from './focus2.js';
@@ -908,11 +908,11 @@ __decorate([
     observable
 ], DataGridCell$1.prototype, "columnDefinition", void 0);
 
-const dataGridStyles = ":host {\n  display: block;\n}\n\n:host([generate-header=sticky]) {\n  max-block-size: 400px;\n}\n\n.base {\n  position: relative;\n  overflow: auto;\n  block-size: inherit;\n  inline-size: 100%;\n  max-block-size: inherit;\n}";
+const dataGridStyles = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}\n";
 
-const dataGridRowStyles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.base {\n  display: grid;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--vvd-color-canvas-text);\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-data-grid-row-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-data-grid-row-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-row-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-data-grid-row-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-data-grid-row-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-data-grid-row-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-data-grid-row-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-data-grid-row-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-row-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-data-grid-row-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-data-grid-row-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-data-grid-row-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n:host([row-type=sticky-header]) .base {\n  position: sticky;\n  z-index: 9;\n  top: 0;\n  background: var(--data-grid-row-background, var(--vvd-color-canvas));\n}\n:host([row-type=hidden-header]) .base {\n  display: none;\n}\n:host(:is([aria-selected]):not([row-type*=header])) .base {\n  background-color: var(--_appearance-color-fill);\n}";
+const dataGridRowStyles = ".base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}:host([row-type=sticky-header]) .base{position:sticky;z-index:9;top:0;background:var(--data-grid-row-background, var(--vvd-color-canvas))}:host([row-type=hidden-header]) .base{display:none}:host(:is([aria-selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}\n";
 
-const dataGridCellStyles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n  min-inline-size: 80px;\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--vvd-color-neutral-300);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-data-grid-cell-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-data-grid-cell-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-cell-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-data-grid-cell-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-data-grid-cell-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-data-grid-cell-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-data-grid-cell-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-data-grid-cell-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-cell-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-data-grid-cell-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-data-grid-cell-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-data-grid-cell-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n:host([cell-type=columnheader]) .base {\n  border-color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}\n:host(:is([aria-selected]):not([cell-type=columnheader])) .base {\n  background-color: var(--_appearance-color-fill);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n:host(:not(:focus)) .base > .focus-indicator {\n  display: none;\n}\n\nslot {\n  display: block;\n  overflow: hidden;\n  inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.header-icon {\n  margin-inline-start: auto;\n}";
+const dataGridCellStyles = ":host{min-inline-size:80px}:host(:focus-visible){outline:none}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:8px 12px;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));color:var(--_appearance-color-text);font:var(--vvd-typography-base)}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host(:is([aria-selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.focus-indicator{--focus-stroke-gap-color: transparent;pointer-events:none}:host(:not(:focus)) .base>.focus-indicator{display:none}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.header-icon{margin-inline-start:auto}\n";
 
 const DataGridCellSortStates = {
   none: "none",
@@ -1059,6 +1059,14 @@ class DataGrid extends DataGrid$1 {
       }
     };
   }
+  /**
+   *
+   *
+   * @internal
+   */
+  slottedRowElementsChanged(_oldValue, _newValue) {
+    this.#initSelections();
+  }
   get #selectedRows() {
     return this.rowElements.filter((row) => row.getAttribute("aria-selected") === "true");
   }
@@ -1101,6 +1109,9 @@ class DataGrid extends DataGrid$1 {
     });
   }
 }
+__decorateClass$2([
+  observable
+], DataGrid.prototype, "slottedRowElements", 2);
 __decorateClass$2([
   attr({ attribute: "selection-mode" })
 ], DataGrid.prototype, "selectionMode", 2);
@@ -1167,10 +1178,10 @@ const DataGridTemplate = (context) => {
     filter: elements("[role=row]")
   })}
         >
-					<div class="base">
-						${setHeaderRow}
-            <slot></slot>
-					</div>
+			<div class="base">
+				${setHeaderRow}
+				<slot ${slotted("slottedRowElements")}></slot>
+			</div>
         </template>
     `;
 };

package/shared/definition2.js

@@ -186,7 +186,7 @@ __decorate([
     observable
 ], Accordion$1.prototype, "accordionItems", void 0);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n::slotted(:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
+const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}\n";
 
 class Accordion extends Accordion$1 {
   constructor() {

package/shared/definition20.js

@@ -12,9 +12,9 @@ import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-const dialogPolyfillStyles = "dialog {\n  position: absolute;\n  left: 0; right: 0;\n  width: -moz-fit-content;\n  width: -webkit-fit-content;\n  width: fit-content;\n  height: -moz-fit-content;\n  height: -webkit-fit-content;\n  height: fit-content;\n  margin: auto;\n  border: solid;\n  padding: 1em;\n  background: white;\n  color: black;\n  display: block;\n}\n\ndialog:not([open]) {\n  display: none;\n}\n\ndialog + .backdrop {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n  background: rgba(0,0,0,0.1);\n}\n\n._dialog_overlay {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n}\n\ndialog.fixed {\n  position: fixed;\n  top: 50%;\n  transform: translate(0, -50%);\n}";
+const dialogPolyfillStyles = "dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;inset:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}\n";
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.base {\n  box-sizing: border-box;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  border-radius: 6px;\n  color: var(--vvd-color-canvas-text);\n  max-block-size: var(--dialog-max-block-size, calc(100vh - 64px));\n  max-inline-size: var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));\n  min-inline-size: var(--dialog-min-inline-size, 280px);\n}\n@media not all and (min-width: 600px) {\n  .base {\n    --_dialog-default-max-inline-size: 90vw;\n  }\n}\n@media (min-width: 600px) {\n  .base {\n    --_dialog-default-max-inline-size: 560px;\n  }\n}\n.base:not(.modal) {\n  z-index: var(--dialog-z-index, 1);\n}\n.base.modal {\n  position: fixed;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);\n}\n.base.modal::backdrop {\n  background-color: var(--vvd-color-canvas-text, currentColor);\n  opacity: 0.5;\n}\n.base:focus-visible {\n  outline: none;\n}\n.base .focus-indicator {\n  pointer-events: none;\n}\n.base:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.main-wrapper {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  gap: 24px;\n  padding-block: 24px;\n}\n.main-wrapper > * {\n  box-sizing: border-box;\n}\n\n.header {\n  display: grid;\n  align-items: flex-start;\n  justify-content: space-between;\n  inline-size: 100%;\n  padding-inline: 24px;\n}\n.base:not(.icon-placement-side) .header {\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto auto auto;\n}\n.base:not(.icon-placement-side) .header .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  grid-column: 1/2;\n  grid-row: 1/2;\n  line-height: 1;\n  margin-block-end: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.base.icon-placement-side .header {\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto auto;\n}\n.base.icon-placement-side .header .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.base.icon-placement-side .header ::slotted(*),\n.base.icon-placement-side .header .icon {\n  grid-column: 1/2;\n  grid-row: 1/-1;\n  margin-inline-end: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n}\n.header.border {\n  position: relative;\n}\n.header.border::after {\n  position: absolute;\n  bottom: -24px;\n  left: 0;\n  background-color: var(--vvd-color-neutral-200);\n  block-size: 1px;\n  content: \"\";\n  inline-size: 100%;\n}\n.base.hide-body .header.border::after {\n  content: none;\n}\n\n.body:not(.full-width) {\n  padding-inline: 24px;\n}\n.hide-body .body {\n  display: none;\n}\n\n.footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\n}\n.footer .actions {\n  display: flex;\n  align-self: flex-end;\n  gap: 8px;\n}\n\n.dismiss-button {\n  flex-shrink: 0;\n  grid-column: -2/-1;\n  grid-row: 1/-1;\n  margin-block-start: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: 4px;\n}\n\n.headline {\n  font: var(--vvd-typography-heading-4);\n}\n\n.subtitle {\n  font: var(--vvd-typography-base);\n}\n\nslot[name=main] {\n  display: block;\n  overflow: hidden auto;\n  max-width: inherit;\n  max-height: inherit;\n  border-radius: inherit;\n}";
+const styles = ".base{box-sizing:border-box;padding:0;border:none;background-color:transparent;border-radius:8px;color:var(--vvd-color-canvas-text);max-block-size:var(--dialog-max-block-size, calc(100vh - 64px));max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (min-width: 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (min-width: 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.modal){z-index:var(--dialog-z-index, 1)}.base.modal{position:fixed;box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{outline:none}.base .focus-indicator{pointer-events:none}.base:not(:focus-visible) .focus-indicator{display:none}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline-end:-8px;margin-inline-start:4px}.headline{font:var(--vvd-typography-heading-4)}.subtitle{font:var(--vvd-typography-base)}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -27,7 +27,7 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-const isDialogSupported = Boolean(HTMLDialogElement && HTMLDialogElement.prototype.showModal);
+const isDialogSupported = Boolean(window.HTMLDialogElement && window.HTMLDialogElement.prototype.showModal);
 let dialogPolyfill;
 (async () => {
   if (!isDialogSupported) {

package/shared/definition21.js

@@ -51,7 +51,7 @@ __decorate([
     attr
 ], Divider$1.prototype, "orientation", void 0);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
+const styles = ":host{display:block}.base{display:block;background-color:var(--vvd-color-neutral-200)}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}\n";
 
 class Divider extends Divider$1 {
 }

package/shared/definition22.js

@@ -5,7 +5,7 @@ import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  block-size: 100%;\n  gap: 24px;\n}\n\n.icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--vvd-color-neutral-100);\n  block-size: 120px;\n  border-radius: 50%;\n  inline-size: 120px;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  text-align: center;\n}\n\nheader {\n  font: var(--vvd-typography-base-bold);\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n.base.no-actions .actions {\n  display: none;\n}";
+const styles = ":host{display:block}.base{display:flex;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;block-size:100%;gap:24px}.icon-container{display:flex;align-items:center;justify-content:center;background-color:var(--vvd-color-neutral-100);block-size:120px;border-radius:50%;inline-size:120px}.content{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:8px;text-align:center}header{font:var(--vvd-typography-base-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition23.js

@@ -4,11 +4,10 @@ import { f as focusRegistries } from './definition58.js';
 import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { B as Button$1 } from './button.js';
-import { f as focusTemplateFactory } from './focus2.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background: var(--_appearance-color-fill, var(--_elevation-fill));\n  block-size: var(--_fab-block-size);\n  border-radius: var(--_fab-border-radius);\n  color: var(--_appearance-color-text, var(--vvd-color-canvas-text));\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  font: var(--vvd-typography-base-bold);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n  vertical-align: middle;\n  /* Size */\n}\n.control.connotation-accent {\n  /* @cssprop [--vvd-fab-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-fab-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-fab-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-fab-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-fab-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-fab-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text));\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-fab-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-fab-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-fab-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-fab-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-fab-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-fab-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600));\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control.size-expanded {\n  --_fab-border-radius: 40px;\n  --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.control:not(.size-expanded) {\n  --_fab-border-radius: 24px;\n  --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.control.icon-only {\n  border-radius: 50%;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_fab-block-size);\n  }\n}\n.control:not(.icon-only) {\n  --fab-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:disabled {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n  cursor: not-allowed;\n}\n.control:not(:disabled) {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n  cursor: pointer;\n}\n.control:not(:disabled):hover {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\nslot[name=icon] {\n  line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n  display: inline-block;\n  order: 1;\n}\n.control.size-extended slot[name=icon] {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16)) / 2.3333);\n}\n.control:not(.size-extended) slot[name=icon] {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n}\n\n:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n.control:not(.connotation-accent, .connotation-cta) .focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}";
+const styles = ".control{display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);border-radius:var(--_fab-border-radius);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.icon-only{border-radius:50%;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px;padding-inline:20px}.control:disabled{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -52,7 +51,6 @@ const getClasses = ({
 );
 const FabTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
-  const focusTemplate = focusTemplateFactory(context);
   return html`
         <button
             class="${getClasses} "
@@ -84,7 +82,6 @@ const FabTemplate = (context) => {
             aria-roledescription="${(x) => x.ariaRoledescription}"
             ${ref("control")}
         >
-            ${() => focusTemplate}
 					  ${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
             ${(x) => x.label}
         </button>

package/shared/definition24.js

@@ -13,7 +13,7 @@ import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n  display: block;\n  max-inline-size: 400px;\n}\n\n.base {\n  display: flex;\n  flex-direction: column;\n}\n\n.control {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  border: 1px dashed var(--vvd-color-neutral-400);\n  background-color: var(--vvd-color-cta-50);\n  border-radius: 6px;\n  color: var(--vvd-color-neutral-600);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  inline-size: 100%;\n  min-block-size: 52px;\n  outline: none;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control:not(.size-expanded) {\n  min-block-size: 52px;\n}\n.control.size-expanded {\n  min-block-size: 120px;\n}\n\n.main {\n  pointer-events: none;\n}\n\n.dz-preview {\n  display: grid;\n  box-sizing: border-box;\n  padding: 6px 12px;\n  border-radius: 6px;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto auto;\n  inline-size: 100%;\n}\n.dz-preview .dz-details {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  max-inline-size: 100%;\n}\n.dz-preview .dz-details .dz-filename {\n  overflow: hidden;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dz-preview .dz-details .dz-size {\n  color: var(--vvd-color-neutral-600);\n  font: var(--vvd-typography-base-condensed);\n}\n.dz-preview .dz-error-message {\n  color: var(--vvd-color-alert-500);\n  font: var(--vvd-typography-base-condensed);\n  margin-block-start: 4px;\n}\n.dz-preview:not(.dz-error) .dz-error-message {\n  display: none;\n}\n.dz-preview.dz-error {\n  border: 1px solid var(--vvd-color-alert-500);\n}\n.dz-preview.dz-error .dz-details .dz-size,\n.dz-preview.dz-error .dz-progress {\n  display: none;\n}\n.dz-preview .remove-btn {\n  display: inline;\n  align-self: center;\n  grid-column: 2/-1;\n  grid-row: 1/-1;\n}\n\n.message {\n  margin-block-start: 4px;\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n\n.preview-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-block-start: 12px;\n  overflow-y: auto;\n}\n.preview-list:empty {\n  display: none;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);border-radius:8px;color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none}@supports selector(:focus-visible){.control:focus-visible{outline:none}}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:6px 12px;border-radius:8px;grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}.control:not(:focus-visible) .focus-indicator{display:none}\n";
 
 var objectExtend = extend;
 

package/shared/definition25.js

@@ -2,7 +2,7 @@ import { a as attr, F as FoundationElement, h as html, r as registerFactory } fr
 import { E as Elevation, e as elevationRegistries } from './definition59.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.base {\n  z-index: 1;\n  block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n  font: var(--vvd-typography-heading-4);\n  inline-size: 100%;\n}\n.base .header-content {\n  display: inline-flex;\n  align-items: center;\n  column-gap: 4px;\n}\n\n.container {\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  background-color: var(--header-bg-color, var(--vvd-color-canvas));\n  block-size: inherit;\n  color: var(--vvd-color-canvas-text);\n  column-gap: 12px;\n  padding-block: 8px;\n  padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n  color-scheme: var(--vvd-color-scheme);\n}\n\n.app-content {\n  --vvd-header-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}";
+const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition26.js

@@ -3,7 +3,7 @@ import { I as Icon } from './icon.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
-const styles = ":host {\n  display: inline-block;\n  vertical-align: sub;\n}\n\n.control {\n  display: flex;\n  margin: unset;\n  block-size: var(--_icon-block-size);\n  color: currentColor;\n  contain: strict;\n  inline-size: var(--_icon-block-size);\n}\n.control.connotation-accent {\n  /* @cssprop [--vvd-icon-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text));\n}\n.control.connotation-announcement {\n  /* @cssprop [--vvd-icon-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500));\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-icon-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500));\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-icon-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-icon-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500));\n}\n.control.connotation-information {\n  /* @cssprop [--vvd-icon-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500));\n}\n.control.size--6 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.size--5 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n.control.size--4 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.size--3 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.control.size--2 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.size--1 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 4));\n}\n.control.size-0 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.control.size-1 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 4));\n}\n.control.size-2 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.control.size-3 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 12));\n}\n.control.size-4 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.control.size-5 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n}\n.control:not(.size--6, .size--5, .size--4, .size--3, .size--2, .size--1, .size-0, .size-1, .size-2, .size-3, .size-4, .size-5) {\n  --_icon-block-size: 1em;\n}\n\n.control[class*=connotation] {\n  color: var(--_connotation-color-primary);\n}\n\nslot, svg, ::slotted(:where(svg, img)) {\n  margin: auto;\n  block-size: inherit;\n  inline-size: inherit;\n}";
+const styles = ":host{display:inline-block;vertical-align:sub}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.size--5{--_icon-block-size:calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--4{--_icon-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--3{--_icon-block-size:calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--2{--_icon-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--1{--_icon-block-size:calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-0{--_icon-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-1{--_icon-block-size:calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-2{--_icon-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-3{--_icon-block-size:calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-4{--_icon-block-size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-5{--_icon-block-size:calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size: 1em}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}\n";
 
 const getClasses = ({
   connotation,

package/shared/definition27.js

@@ -30,7 +30,7 @@ __decorateClass([
   attr({ attribute: "auto-sizing" })
 ], Layout.prototype, "autoSizing", 2);
 
-const styles = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: var(--layout-grid-template-rows, min-content);\n}\n.control.column-basis-small {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)));\n}\n.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block), .control.column-basis-medium {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)));\n}\n.control.column-basis-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)));\n}\n.control.column-basis-block {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-small {\n  column-gap: var(--layout-column-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.column-spacing-small-inline {\n  column-gap: var(--layout-column-gap, 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.column-spacing-small-block {\n  column-gap: var(--layout-column-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0);\n}\n.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block), .control.column-spacing-medium {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.column-spacing-medium-inline {\n  column-gap: var(--layout-column-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.column-spacing-medium-block {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0);\n}\n.control.column-spacing-large {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.column-spacing-large-inline {\n  column-gap: var(--layout-column-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.column-spacing-large-block {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0);\n}\n.control.row-spacing-small {\n  row-gap: var(--layout-row-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.row-spacing-small-inline {\n  row-gap: var(--layout-row-gap, 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.row-spacing-small-block {\n  row-gap: var(--layout-row-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0);\n}\n.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block), .control.row-spacing-medium {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.row-spacing-medium-inline {\n  row-gap: var(--layout-row-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.row-spacing-medium-block {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0);\n}\n.control.row-spacing-large {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.row-spacing-large-inline {\n  row-gap: var(--layout-row-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.row-spacing-large-block {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0);\n}\n.control.gutters-small {\n  margin: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.gutters-small-inline {\n  margin: 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.gutters-small-block {\n  margin: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0;\n}\n.control.gutters-medium {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.gutters-medium-inline {\n  margin: 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.gutters-medium-block {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0;\n}\n.control.gutters-large {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.gutters-large-inline {\n  margin: 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.gutters-large-block {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0;\n}\n.control.auto-sizing-fill {\n  --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n  --_auto-sizing: auto-fit;\n}";
+const styles = ".control{display:grid;grid-auto-rows:var(--layout-grid-template-rows, min-content)}.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}.control.column-spacing-small{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.column-spacing-small-block{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-large-block{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.row-spacing-small-block{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-large-block{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.gutters-small{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-inline{margin:0 calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-block{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))) 0}.control.gutters-medium{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-inline{margin:0 calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-block{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.gutters-large{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-inline{margin:0 calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-block{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.auto-sizing-fill{--_auto-sizing: auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing: auto-fit}\n";
 
 const getClasses = ({
   columnBasis,

package/shared/definition28.js

@@ -570,7 +570,7 @@ __decorate([
     observable
 ], Menu$1.prototype, "items", void 0);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus-visible) {\n    outline: none;\n  }\n}\n:host([disabled]) {\n  pointer-events: none;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  gap: 12px;\n  inline-size: 100%;\n  padding-block: 2px;\n  padding-inline: 16px;\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.base {\n  /* @cssprop [--vvd-menu-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-menu-item-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-menu-item-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-menu-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-menu-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-menu-item-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-menu-item-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200));\n}\n.base:not(.two-lines) {\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base.two-lines {\n  min-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n\n.focus-indicator {\n  border-radius: 6px;\n}\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  flex-shrink: 0;\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  line-height: 1;\n}\n\n.action,\n.decorative {\n  display: flex;\n  place-content: center;\n}\n\n.action {\n  color: var(--_appearance-color-text);\n}\n.base.trailing .action {\n  order: 1;\n  margin-inline-start: auto;\n}\n.base.has-meta .action {\n  order: 1;\n  margin-inline-start: auto;\n}\n\n.base:not(.disabled) .decorative {\n  color: var(--vvd-color-neutral-600);\n}\n.base.disabled .decorative {\n  color: var(--vvd-color-neutral-200);\n}\n.base.has-meta .decorative {\n  order: 1;\n  margin-inline-start: auto;\n}\n\n.chevron {\n  margin-inline-start: auto;\n}\n\n.text {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n}\n\n.text-primary,\n.text-secondary {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n}\n\n.text-primary {\n  -webkit-line-clamp: var(--text-primary-line-clamp, 1);\n}\n.base.two-lines .text-primary {\n  font: var(--vvd-typography-base-bold);\n}\n\n.text-secondary {\n  -webkit-line-clamp: var(--text-secondary-line-clamp, 1);\n}\n.base.two-lines .text-secondary {\n  color: var(--vvd-color-neutral-600);\n}";
+const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host([disabled]){pointer-events:none}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);gap:12px;inline-size:100%;padding-block:2px;padding-inline:16px}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base:not(.two-lines){min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.two-lines{min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.focus-indicator{border-radius:8px}:host(:not(:focus-visible)) .focus-indicator{display:none}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:1;margin-inline-start:auto}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1;margin-inline-start:auto}.chevron{margin-inline-start:auto}.text{display:flex;overflow:hidden;flex-direction:column}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:var(--_appearance-color-text);font:var(--vvd-typography-base)}.text-primary{-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}\n";
 
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;

package/shared/definition29.js

@@ -4,7 +4,7 @@ import { b as Menu, a as menuItemRegistries } from './definition28.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  gap: 8px;\n  inline-size: max-content;\n  max-block-size: var(--menu-block-size, 408px);\n  max-inline-size: var(--menu-max-inline-size);\n  min-inline-size: var(--menu-min-inline-size);\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-block: 8px;\n}\n\n::slotted(a) {\n  color: var(--vvd-color-canvas-text);\n  text-decoration: none;\n}\n\n::slotted(a[role=menuitem]:focus) {\n  display: block;\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 3px currentColor;\n  outline: 2px solid currentColor;\n  outline-offset: -2px;\n}\n\n.header {\n  padding-block-start: 8px;\n  padding-inline: 16px;\n}\n.hide-header .header {\n  display: none;\n}\n\n.hide-body .body {\n  display: none;\n}\n\n.action-items {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding-inline: 8px;\n}\n.hide-actions .action-items {\n  display: none;\n}";
+const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);overflow-x:hidden;overflow-y:auto;padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]:focus){display:block;border-radius:8px;box-shadow:inset 0 0 0 3px currentColor;outline:2px solid currentColor;outline-offset:-2px}.header{padding-block-start:8px;padding-inline:16px}.hide-header .header,.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-inline:8px}.hide-actions .action-items{display:none}\n";
 
 const getClasses = ({
   headerSlottedContent,

package/shared/definition3.js

@@ -1,7 +1,7 @@
 import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  inline-size: inherit;\n  vertical-align: middle;\n}\n.base {\n  /* @cssprop [--vvd-action-group-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-action-group-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-action-group-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-action-group-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-action-group-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50));\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base::before {\n  position: absolute;\n  z-index: 1;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  content: \"\";\n  inset: 0;\n  pointer-events: none;\n}\n.base:not(.tight) {\n  padding: 4px;\n  column-gap: 4px;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.base.shape-pill {\n  border-radius: 24px;\n}\n\n/* Separator */\n::slotted([role=separator]) {\n  align-self: stretch;\n  margin-block: 4px;\n}";
+const styles = ":host{display:inline-block}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base{--_connotation-color-backdrop: var(--vvd-action-group-accent-backdrop, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition30.js

@@ -8,7 +8,7 @@ import { f as focusTemplateFactory } from './focus2.js';
 import { r as ref } from './ref.js';
 import { w as when } from './when.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.control {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  padding-block: 10px;\n  padding-inline: 16px;\n  text-decoration: none;\n  vertical-align: middle;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control {\n  /* @cssprop [--vvd-nav-disclosure-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-nav-disclosure-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-nav-disclosure-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-nav-disclosure-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-nav-disclosure-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-nav-disclosure-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-nav-disclosure-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-nav-disclosure-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-nav-disclosure-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-nav-disclosure-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control .toggleIcon {\n  margin-inline-start: auto;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\nslot[name=icon] {\n  font-size: 20px;\n  line-height: 1;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  border-inline-start: 1px solid var(--vvd-color-neutral-200);\n  gap: 4px;\n  margin-block: 4px;\n  margin-inline-start: 20px;\n  padding-inline-start: 12px;\n}\n\ndetails > summary {\n  list-style: none;\n}\n\ndetails > summary::-webkit-details-marker {\n  display: none;\n}";
+const styles = ".control{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:10px;padding-inline:16px;text-decoration:none;vertical-align:middle}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-nav-disclosure-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-disclosure-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-nav-disclosure-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-nav-disclosure-accent-soft, var(--vvd-color-neutral-100))}@supports selector(:focus-visible){.control:focus-visible{outline:none}}@supports (user-select: none){.control{user-select:none}}.control .toggleIcon{margin-inline-start:auto}.focus-indicator{--focus-stroke-gap-color: transparent}.control:not(:focus-visible) .focus-indicator{display:none}slot[name=icon]{font-size:20px;line-height:1}.content{display:flex;flex-direction:column;border-inline-start:1px solid var(--vvd-color-neutral-200);gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;