@vonage/vivid - npm Package Compare versions

Comparing version 3.0.0-next.33 to 3.0.0-next.34

accordion-item/index.js

@@ -19,3 +19,3 @@ import '../icon/index.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.body {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  padding: 8px 32px 24px 16px;\n}\n.icon:not(.icon-trailing) .body {\n  padding-left: 48px;\n}\n\n.base {\n  display: flex;\n  flex-direction: column;\n}\n.base:not(.open) .body {\n  display: none;\n}\n\n.header {\n  padding: 0;\n  margin: 0;\n}\n\n.button {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: 0 none;\n  margin: 0;\n  background-color: var(--_appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n}\n.button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.button:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transaprent;\n}\n.button: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: transaprent;\n}\n.button {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-faint: var(--vvd-color-neutral-10);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n}\n@supports selector(:focus-visible) {\n  .button:focus {\n    outline: none;\n  }\n}\n.button .heading-text {\n  flex-grow: 1;\n  margin-inline-end: auto;\n  text-align: left;\n}\n.button .meta {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-70);\n  margin-inline-start: 16px;\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.button .indicator {\n  display: flex;\n}\n.button .indicator vwc-icon,\n.button .indicator slot[name=indicator i]::slotted(vwc-icon) {\n  margin-inline-start: 16px;\n}\n.button .icon {\n  margin-inline-end: 16px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n\n.button:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.body {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  padding: 8px 32px 24px 16px;\n}\n.icon:not(.icon-trailing) .body {\n  padding-left: 48px;\n}\n\n.base {\n  display: flex;\n  flex-direction: column;\n}\n.base:not(.open) .body {\n  display: none;\n}\n\n.header {\n  padding: 0;\n  margin: 0;\n}\n\n.button {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: 0 none;\n  margin: 0;\n  background-color: var(--_appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n}\n.button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.button:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transaprent;\n}\n.button: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: transaprent;\n}\n.button {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-faint: var(--vvd-color-neutral-10);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n}\n@supports selector(:focus-visible) {\n  .button:focus {\n    outline: none;\n  }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n  .button {\n    -webkit-user-select: none;\n            user-select: none;\n  }\n}\n.button .heading-text {\n  flex-grow: 1;\n  margin-inline-end: auto;\n  text-align: left;\n}\n.button .meta {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-70);\n  margin-inline-start: 16px;\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.button .indicator {\n  display: flex;\n}\n.button .indicator vwc-icon,\n.button .indicator slot[name=indicator i]::slotted(vwc-icon) {\n  margin-inline-start: 16px;\n}\n.button .icon {\n  margin-inline-end: 16px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n\n.button:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
 styleInject(css_248z);
@@ -22,0 +22,0 @@

button/index.js

@@ -47,3 +47,3 @@ import '../icon/index.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 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  margin: 0;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_button-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  gap: var(--_button-icon-gap);\n  vertical-align: middle;\n  white-space: nowrap;\n  /* Size */\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n  --_connotation-color-on-primary: var(--vvd-color-on-cta);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n  --_connotation-color-contrast: var(--vvd-color-cta-90);\n  --_connotation-color-fierce: var(--vvd-color-cta-80);\n  --_connotation-color-firm: var(--vvd-color-cta-70);\n  --_connotation-color-soft: var(--vvd-color-cta-20);\n  --_connotation-color-faint: var(--vvd-color-cta-10);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n  --_connotation-color-on-primary: var(--vvd-color-on-success);\n  --_connotation-color-primary-increment: var(--vvd-color-success-70);\n  --_connotation-color-contrast: var(--vvd-color-success-90);\n  --_connotation-color-fierce: var(--vvd-color-success-80);\n  --_connotation-color-firm: var(--vvd-color-success-70);\n  --_connotation-color-soft: var(--vvd-color-success-20);\n  --_connotation-color-faint: var(--vvd-color-success-10);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n  --_connotation-color-on-primary: var(--vvd-color-on-alert);\n  --_connotation-color-primary-increment: var(--vvd-color-alert-70);\n  --_connotation-color-contrast: var(--vvd-color-alert-90);\n  --_connotation-color-fierce: var(--vvd-color-alert-80);\n  --_connotation-color-firm: var(--vvd-color-alert-70);\n  --_connotation-color-soft: var(--vvd-color-alert-20);\n  --_connotation-color-faint: var(--vvd-color-alert-10);\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert) {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-on-primary: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n  --_connotation-color-contrast: var(--vvd-color-neutral-90);\n  --_connotation-color-fierce: var(--vvd-color-neutral-80);\n  --_connotation-color-firm: var(--vvd-color-on-canvas);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n  --_connotation-color-faint: var(--vvd-color-neutral-10);\n}\n.control.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-30);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-firm);\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: transaprent;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control:not(:disabled) {\n  cursor: pointer;\n}\n.control:disabled {\n  cursor: not-allowed;\n}\n.control.icon-only {\n  contain: size;\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(--_button-block-size);\n  }\n}\n.control:not(.stacked).density-condensed {\n  --_button-block-size: 32px;\n  font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.stacked).density-condensed:not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control:not(.stacked).density-condensed .icon {\n  font-size: 16px;\n}\n.control:not(.stacked).density-extended {\n  --_button-block-size: 48px;\n  font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.stacked).density-extended:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:not(.stacked).density-extended .icon {\n  font-size: 24px;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended) {\n  --_button-block-size: 40px;\n  font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended):not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended) .icon {\n  font-size: 20px;\n}\n.control.stacked {\n  flex-direction: column;\n  justify-content: center;\n  --_button-block-size: 68px;\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.stacked:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 16px;\n}\n.control.stacked .icon {\n  font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill:not(.stacked)) {\n  border-radius: 6px;\n}\n\n.control.shape-pill:not(.stacked):not(.icon-only) {\n  border-radius: 24px;\n}\n.control.shape-pill:not(.stacked).icon-only {\n  border-radius: 50%;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n\n:not(:focus-visible) > .focus-indicator {\n  display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 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  margin: 0;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_button-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  gap: var(--_button-icon-gap);\n  vertical-align: middle;\n  white-space: nowrap;\n  /* Size */\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n  --_connotation-color-on-primary: var(--vvd-color-on-cta);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n  --_connotation-color-contrast: var(--vvd-color-cta-90);\n  --_connotation-color-fierce: var(--vvd-color-cta-80);\n  --_connotation-color-firm: var(--vvd-color-cta-70);\n  --_connotation-color-soft: var(--vvd-color-cta-20);\n  --_connotation-color-faint: var(--vvd-color-cta-10);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n  --_connotation-color-on-primary: var(--vvd-color-on-success);\n  --_connotation-color-primary-increment: var(--vvd-color-success-70);\n  --_connotation-color-contrast: var(--vvd-color-success-90);\n  --_connotation-color-fierce: var(--vvd-color-success-80);\n  --_connotation-color-firm: var(--vvd-color-success-70);\n  --_connotation-color-soft: var(--vvd-color-success-20);\n  --_connotation-color-faint: var(--vvd-color-success-10);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n  --_connotation-color-on-primary: var(--vvd-color-on-alert);\n  --_connotation-color-primary-increment: var(--vvd-color-alert-70);\n  --_connotation-color-contrast: var(--vvd-color-alert-90);\n  --_connotation-color-fierce: var(--vvd-color-alert-80);\n  --_connotation-color-firm: var(--vvd-color-alert-70);\n  --_connotation-color-soft: var(--vvd-color-alert-20);\n  --_connotation-color-faint: var(--vvd-color-alert-10);\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert) {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-on-primary: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n  --_connotation-color-contrast: var(--vvd-color-neutral-90);\n  --_connotation-color-fierce: var(--vvd-color-neutral-80);\n  --_connotation-color-firm: var(--vvd-color-on-canvas);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n  --_connotation-color-faint: var(--vvd-color-neutral-10);\n}\n.control.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-30);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-firm);\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: transaprent;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n  .control {\n    -webkit-user-select: none;\n            user-select: none;\n  }\n}\n.control:not(:disabled) {\n  cursor: pointer;\n}\n.control:disabled {\n  cursor: not-allowed;\n}\n.control.icon-only {\n  contain: size;\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(--_button-block-size);\n  }\n}\n.control:not(.stacked).density-condensed {\n  --_button-block-size: 32px;\n  font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.stacked).density-condensed:not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control:not(.stacked).density-condensed .icon {\n  font-size: 16px;\n}\n.control:not(.stacked).density-extended {\n  --_button-block-size: 48px;\n  font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.stacked).density-extended:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:not(.stacked).density-extended .icon {\n  font-size: 24px;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended) {\n  --_button-block-size: 40px;\n  font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended):not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended) .icon {\n  font-size: 20px;\n}\n.control.stacked {\n  flex-direction: column;\n  justify-content: center;\n  --_button-block-size: 68px;\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.stacked:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 16px;\n}\n.control.stacked .icon {\n  font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill:not(.stacked)) {\n  border-radius: 6px;\n}\n\n.control.shape-pill:not(.stacked):not(.icon-only) {\n  border-radius: 24px;\n}\n.control.shape-pill:not(.stacked).icon-only {\n  border-radius: 50%;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n\n:not(:focus-visible) > .focus-indicator {\n  display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}";
 styleInject(css_248z);
@@ -50,0 +50,0 @@

card/index.js

@@ -14,3 +14,3 @@ import '../shared/index2.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  display: flex;\n}\n\n.base {\n  border-radius: 6px;\n  inline-size: 100%;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: inherit;\n  border-radius: inherit;\n  color: var(--vvd-color-on-canvas);\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-title, .header-subheading {\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-title {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--heading-line-clamp);\n}\n.header-subheading {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--subheading-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subheading,\n.text {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  color: var(--vvd-color-neutral-70);\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}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  display: flex;\n}\n\n.base {\n  border-radius: 6px;\n  inline-size: 100%;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: inherit;\n  border-radius: inherit;\n  color: var(--vvd-color-on-canvas);\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: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--headline-line-clamp);\n}\n.header-subtitle {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--subtitle-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subtitle,\n.text {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  color: var(--vvd-color-neutral-70);\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}";
 styleInject(css_248z);
@@ -20,5 +20,5 @@
 
-__decorate([attr, __metadata("design:type", String)], Card.prototype, "heading", void 0);
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "headline", void 0);
 
-__decorate([attr, __metadata("design:type", String)], Card.prototype, "subheading", void 0);
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "subtitle", void 0);
 
@@ -54,12 +54,12 @@ __decorate([attr, __metadata("design:type", String)], Card.prototype, "text", void 0);
 
-function heading() {
+function Headline() {
   return html(_t2 || (_t2 = _2`
-		<div class="header-title">${0}</div>
-	`), x => x.heading);
+		<div class="header-headline">${0}</div>
+	`), x => x.headline);
 }
 
-function subheading() {
+function Subtitle() {
   return html(_t3 || (_t3 = _2`
-		<div class="header-subheading">${0}</div>
-	`), x => x.subheading);
+		<div class="header-subtitle">${0}</div>
+	`), x => x.subtitle);
 }
@@ -73,3 +73,3 @@
 		</div>
-	`), when(x => x.heading, heading()), when(x => x.subheading, subheading()));
+	`), when(x => x.headline, Headline()), when(x => x.subtitle, Subtitle()));
 }
@@ -82,7 +82,7 @@
 			${0}
-		</header>`), slotted('graphicSlottedContent'), when(x => x.icon, renderHeaderIcon()), when(x => x.heading || x.subheading, headerContent()));
+		</header>`), slotted('graphicSlottedContent'), when(x => x.icon, renderHeaderIcon()), when(x => x.headline || x.subtitle, headerContent()));
 }
 
 function shouldHideHeader(card) {
-  return !card.heading && !card.subheading && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
+  return !card.headline && !card.subtitle && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
 }
@@ -89,0 +89,0 @@

fab/index.js

@@ -22,3 +22,3 @@ import '../icon/index.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background-color: 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-on-canvas));\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n  vertical-align: middle;\n  /* Size */\n}\n.control.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-on-primary: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n  --_connotation-color-contrast: var(--vvd-color-neutral-90);\n  --_connotation-color-fierce: var(--vvd-color-neutral-80);\n  --_connotation-color-firm: var(--vvd-color-on-canvas);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n  --_connotation-color-on-primary: var(--vvd-color-on-cta);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n  --_connotation-color-contrast: var(--vvd-color-cta-90);\n  --_connotation-color-fierce: var(--vvd-color-cta-80);\n  --_connotation-color-firm: var(--vvd-color-cta-70);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-30);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transaprent;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control.density-extended {\n  --_fab-border-radius: 30px;\n  --_fab-block-size: 56px;\n}\n.control:not(.density-extended) {\n  --_fab-border-radius: 24px;\n  --_fab-block-size: 40px;\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 */\n.icon {\n  font-size: 20px;\n}\n.icon-trailing .icon {\n  order: 1;\n}\n\n:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background-color: 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-on-canvas));\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n  vertical-align: middle;\n  /* Size */\n}\n.control.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-on-primary: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n  --_connotation-color-contrast: var(--vvd-color-neutral-90);\n  --_connotation-color-fierce: var(--vvd-color-neutral-80);\n  --_connotation-color-firm: var(--vvd-color-on-canvas);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n  --_connotation-color-on-primary: var(--vvd-color-on-cta);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n  --_connotation-color-contrast: var(--vvd-color-cta-90);\n  --_connotation-color-fierce: var(--vvd-color-cta-80);\n  --_connotation-color-firm: var(--vvd-color-cta-70);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-30);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transaprent;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n  .control {\n    -webkit-user-select: none;\n            user-select: none;\n  }\n}\n.control.density-extended {\n  --_fab-border-radius: 30px;\n  --_fab-block-size: 56px;\n}\n.control:not(.density-extended) {\n  --_fab-border-radius: 24px;\n  --_fab-block-size: 40px;\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 */\n.icon {\n  font-size: 20px;\n}\n.icon-trailing .icon {\n  order: 1;\n}\n\n:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
 styleInject(css_248z);
@@ -25,0 +25,0 @@

lib/card/card.d.ts

 import { FoundationElement } from '@microsoft/fast-foundation';
 export declare class Card extends FoundationElement {
-    heading?: string;
-    subheading?: string;
+    headline?: string;
+    subtitle?: string;
     text?: string;
@@ -6,0 +6,0 @@ icon?: string;

lib/note/note.d.ts

@@ -6,3 +6,3 @@ import { FoundationElement } from '@microsoft/fast-foundation';
 export declare class Note extends FoundationElement {
-    heading?: string;
+    headline?: string;
     connotation?: NoteConnotation;
@@ -9,0 +9,0 @@ }

note/index.js

@@ -18,3 +18,3 @@ import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n  display: flex;\n  align-items: stretch;\n  padding: 20px;\n  border-left: 8px solid var(--_connotation-color-primary);\n  background-color: var(--vvd-color-canvas);\n  border-radius: 6px;\n  box-shadow: inset 0 1px 0 0 var(--vvd-color-neutral-40), inset -1px 0 0 0 var(--vvd-color-neutral-40), inset 0 -1px 0 0 var(--vvd-color-neutral-40);\n  color: var(--vvd-color-on-canvas);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n}\n.base.connotation-info {\n  --_connotation-color-primary: var(--vvd-color-info);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n}\n.base.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning);\n}\n.base:not(.connotation-success, .connotation-info, .connotation-alert, .connotation-warning) {\n  --_connotation-color-primary: var(--vvd-color-announcement);\n}\n@supports (contain: content) {\n  .base {\n    contain: content;\n  }\n}\n@supports not (contain: content) {\n  .base {\n    overflow: hidden;\n  }\n}\n\n.icon {\n  align-self: flex-start;\n  font-size: 24px;\n  margin-inline-end: 16px;\n}\n\n.text {\n  display: flex;\n  min-height: 24px;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  text-align: start;\n}\n.text .heading {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.text .message {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n  display: flex;\n  align-items: stretch;\n  padding: 20px;\n  border-left: 8px solid var(--_connotation-color-primary);\n  background-color: var(--vvd-color-canvas);\n  border-radius: 6px;\n  box-shadow: inset 0 1px 0 0 var(--vvd-color-neutral-40), inset -1px 0 0 0 var(--vvd-color-neutral-40), inset 0 -1px 0 0 var(--vvd-color-neutral-40);\n  color: var(--vvd-color-on-canvas);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n}\n.base.connotation-info {\n  --_connotation-color-primary: var(--vvd-color-info);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n}\n.base.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning);\n}\n.base:not(.connotation-success, .connotation-info, .connotation-alert, .connotation-warning) {\n  --_connotation-color-primary: var(--vvd-color-announcement);\n}\n@supports (contain: content) {\n  .base {\n    contain: content;\n  }\n}\n@supports not (contain: content) {\n  .base {\n    overflow: hidden;\n  }\n}\n\n.icon {\n  align-self: flex-start;\n  font-size: 24px;\n  margin-inline-end: 16px;\n}\n\n.text {\n  display: flex;\n  min-height: 24px;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  text-align: start;\n}\n.text .headline {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.text .message {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}";
 styleInject(css_248z);
@@ -24,3 +24,3 @@
 
-__decorate([attr, __metadata("design:type", String)], Note.prototype, "heading", void 0);
+__decorate([attr, __metadata("design:type", String)], Note.prototype, "headline", void 0);
 
@@ -42,3 +42,3 @@ __decorate([attr, __metadata("design:type", String)], Note.prototype, "connotation", void 0);
 function getHeaderTemplate() {
-  return html(_t || (_t = _`<div class="heading">${0}</div>`), x => x.heading);
+  return html(_t || (_t = _`<div class="headline">${0}</div>`), x => x.headline);
 }
@@ -62,3 +62,3 @@
     </div>
-`), getClasses, getIconTemplate(), when(x => x.heading, getHeaderTemplate()));
+`), getClasses, getIconTemplate(), when(x => x.headline, getHeaderTemplate()));
 
@@ -65,0 +65,0 @@ const vividNote = Note.compose({

package.json

 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.33",
+  "version": "3.0.0-next.34",
   "type": "module",
@@ -5,0 +5,0 @@ "module": "./index.esm.js",

sidenav-disclosure/index.js

@@ -19,3 +19,3 @@ import '../icon/index.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\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  gap: 8px;\n  -webkit-hyphens: auto;\n          hyphens: auto;\n  inline-size: 100%;\n  min-block-size: 40px;\n  padding-inline: 8px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transaprent;\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: transaprent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-faint: var(--vvd-color-neutral-10);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control .toggleIcon {\n  margin-inline-start: auto;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n.content {\n  border-inline-start: 1px solid var(--vvd-color-neutral-30);\n  margin-inline-start: 32px;\n}\n\ndetails > summary {\n  list-style: none;\n}\n\ndetails > summary::-webkit-details-marker {\n  display: none;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\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  gap: 8px;\n  -webkit-hyphens: auto;\n          hyphens: auto;\n  inline-size: 100%;\n  min-block-size: 40px;\n  padding-inline: 8px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transaprent;\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: transaprent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-faint: var(--vvd-color-neutral-10);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n  .control {\n    -webkit-user-select: none;\n            user-select: none;\n  }\n}\n.control .toggleIcon {\n  margin-inline-start: auto;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n.content {\n  border-inline-start: 1px solid var(--vvd-color-neutral-30);\n  margin-inline-start: 32px;\n}\n\ndetails > summary {\n  list-style: none;\n}\n\ndetails > summary::-webkit-details-marker {\n  display: none;\n}";
 styleInject(css_248z);
@@ -22,0 +22,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

710717

increased by0.09%

Lines of code

16911

increased by0.01%

No dependency changes