@duetds/components 10.0.0-alpha.2 → 10.0.0-alpha.4

package/lib/types/components.d.ts

@@ -1770,7 +1770,7 @@ export namespace Components {
          */
         "description": string;
         /**
-          * @deprecated please use heading slot instead. The heading of the hero area, rendered in an H1 tag. P.S. you can control the level of the HTML heading by using “level” prop. If empty, heading will be hidden.
+          * The heading of the hero area, rendered in an H1 tag. P.S. you can control the level of the HTML heading by using “level” prop. If empty, heading will be hidden. There is also a heading slot that can be used.
          */
         "heading": string;
         /**
@@ -3617,6 +3617,7 @@ export namespace Components {
           * Vertical alignment of the previous and forward buttons. Defaults to center.
          */
         "buttonAlignment": "top" | "center" | "bottom";
+        "buttonPosition": "absolute" | "relative";
         /**
           * Whether or not include previous and forward buttons. Defaults to true.
          */
@@ -3629,6 +3630,7 @@ export namespace Components {
           * Boolean to collapse scrollable items into normal flow.
          */
         "collapsed": boolean;
+        "gap": "none" | "large";
         /**
           * Optional identifier to add to buttons in the tab group
          */
@@ -4263,6 +4265,7 @@ export namespace Components {
         "accessibleLabel": string;
         /**
           * Whether the tab-group collapses to a select dropwdown in minor breakpoints
+          * @deprecated as scrolls is now always enabled, tabs never collapse to a dropdown, and this attribute has no effect
          */
         "collapses": boolean;
         /**
@@ -4307,7 +4310,8 @@ export namespace Components {
          */
         "refresh": () => Promise<void>;
         /**
-          * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens), if this is a number instead of true it will be used as "amount of items to scroll"
+          * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens)
+          * @deprecated scrolling is now the deafult behavior which can not be overridden, and this attribute has no effect
          */
         "scrolls": boolean;
         /**
@@ -4323,7 +4327,7 @@ export namespace Components {
          */
         "theme": DuetTheme;
         /**
-          * Style variation of the tab group.
+          * Style variation of the tab group. Note that "plain-scrolling" is deprecated, as tab-group now allways has scrolling behavior, use values "default", "plain" or "checked"
          */
         "variation": DuetTabVariation;
     }
@@ -8264,7 +8268,7 @@ declare namespace LocalJSX {
          */
         "description"?: string;
         /**
-          * @deprecated please use heading slot instead. The heading of the hero area, rendered in an H1 tag. P.S. you can control the level of the HTML heading by using “level” prop. If empty, heading will be hidden.
+          * The heading of the hero area, rendered in an H1 tag. P.S. you can control the level of the HTML heading by using “level” prop. If empty, heading will be hidden. There is also a heading slot that can be used.
          */
         "heading"?: string;
         /**
@@ -10711,6 +10715,7 @@ declare namespace LocalJSX {
         "accessibleLabel"?: string;
         /**
           * Whether the tab-group collapses to a select dropwdown in minor breakpoints
+          * @deprecated as scrolls is now always enabled, tabs never collapse to a dropdown, and this attribute has no effect
          */
         "collapses"?: boolean;
         /**
@@ -10758,7 +10763,8 @@ declare namespace LocalJSX {
          */
         "padding"?: DuetPadding;
         /**
-          * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens), if this is a number instead of true it will be used as "amount of items to scroll"
+          * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens)
+          * @deprecated scrolling is now the deafult behavior which can not be overridden, and this attribute has no effect
          */
         "scrolls"?: boolean;
         /**
@@ -10774,7 +10780,7 @@ declare namespace LocalJSX {
          */
         "theme"?: DuetTheme;
         /**
-          * Style variation of the tab group.
+          * Style variation of the tab group. Note that "plain-scrolling" is deprecated, as tab-group now allways has scrolling behavior, use values "default", "plain" or "checked"
          */
         "variation"?: DuetTabVariation;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "10.0.0-alpha.2",
+  "version": "10.0.0-alpha.4",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -45,8 +45,8 @@
   },
   "devDependencies": {
     "@duetds/fonts": "3.0.51",
-    "@duetds/icons": "4.1.2",
-    "@duetds/tokens": "4.0.79",
+    "@duetds/icons": "4.1.4",
+    "@duetds/tokens": "4.0.81",
     "@percy/cli": "1.30.1",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "4.23.0",

package/lib/collection/components/duet-table/duet-table.css

@@ -1,365 +0,0 @@
-duet-table {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: 0;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  margin-bottom: 20px !important;
-  display: block;
-  font-variant-numeric: tabular-nums;
-}
-duet-table table,
-duet-table thead,
-duet-table tbody,
-duet-table tfoot,
-duet-table th,
-duet-table td,
-duet-table tr {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: 0;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-}
-duet-table.duet-m-0 {
-  margin: 0 !important;
-}
-duet-table table {
-  width: 100%;
-  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 1rem;
-  text-align: left;
-  border-spacing: 0;
-  border-collapse: separate;
-}
-duet-table.duet-table-hide-head-visually.duet-table-hide-head-visually thead,
-duet-table.duet-table-hide-head-visually.duet-table-hide-head-visually thead * {
-  position: absolute !important;
-  top: 0;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  border: 0 !important;
-}
-duet-table.duet-theme-turva table {
-  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-duet-table td {
-  -webkit-hyphens: auto;
-  hyphens: auto;
-  color: rgb(8, 42, 77);
-}
-duet-table.duet-theme-turva td {
-  color: rgb(23, 28, 58);
-}
-duet-table th {
-  font-weight: 600;
-  line-height: 1.25;
-  color: rgb(98, 121, 138);
-  text-align: left;
-}
-duet-table.duet-theme-turva th {
-  color: rgb(143, 147, 158);
-}
-duet-table tbody th {
-  font-weight: 600;
-  color: rgb(8, 42, 77);
-}
-duet-table.duet-theme-turva tbody th {
-  color: rgb(23, 28, 58);
-}
-duet-table .duet-table-action-row td:last-child {
-  justify-self: end;
-  padding-right: 20px !important;
-  white-space: nowrap;
-}
-duet-table span.duet-table-cell-heading {
-  display: none;
-}
-
-.duet-table-flattened table,
-.duet-table-flattened thead,
-.duet-table-flattened tbody,
-.duet-table-flattened tfoot,
-.duet-table-flattened th,
-.duet-table-flattened td,
-.duet-table-flattened tr {
-  display: block;
-}
-.duet-table-flattened thead tr {
-  position: absolute !important;
-  top: 0;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  border: 0 !important;
-}
-.duet-table-flattened td {
-  line-height: 1.25;
-}
-.duet-table-flattened td:not(:last-child) {
-  margin-bottom: 16px !important;
-}
-.duet-table-flattened td span.duet-table-cell-heading {
-  margin-bottom: 4px !important;
-  display: block;
-  font-size: 1rem;
-  font-weight: 600;
-  color: rgb(8, 42, 77);
-}
-.duet-table-flattened.duet-theme-turva td span.duet-table-cell-heading {
-  color: rgb(23, 28, 58);
-}
-.duet-table-flattened tbody td,
-.duet-table-flattened tbody th,
-.duet-table-flattened tfoot td {
-  padding: 0 !important;
-  text-align: left !important;
-}
-.duet-table-flattened tbody th {
-  font-weight: 600;
-  line-height: 1.25;
-  color: rgb(98, 121, 138);
-  text-align: left;
-}
-
-.duet-table-sticky thead th {
-  position: sticky;
-  top: 0;
-  background: rgb(255, 255, 255);
-}
-
-.duet-table-striped td,
-.duet-table-striped th {
-  padding: 20px !important;
-}
-@media (max-width: 35.9375em) {
-  .duet-table-striped td,
-  .duet-table-striped th {
-    padding: 20px 12px !important;
-  }
-}
-.duet-table-striped tbody th {
-  background: rgb(255, 255, 255);
-}
-.duet-table-striped.duet-table-sticky thead th {
-  border-bottom: 1px solid rgb(212, 223, 229);
-}
-.duet-table-striped.duet-table-sticky.duet-theme-turva thead th {
-  border-bottom-color: rgb(222, 224, 228);
-}
-.duet-table-striped tbody:not(:first-of-type) th {
-  padding-top: 40px !important;
-}
-.duet-table-striped tbody:only-of-type tr:nth-of-type(odd) {
-  background: rgba(4, 81, 128, 0.04);
-}
-.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd) {
-  background: rgba(23, 28, 58, 0.04);
-}
-.duet-table-striped tbody:not(:only-of-type) tr:nth-of-type(even) {
-  background: rgba(4, 81, 128, 0.04);
-}
-.duet-table-striped.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even) {
-  background: rgba(23, 28, 58, 0.04);
-}
-.duet-table-striped tfoot td {
-  border-top: 1px solid rgb(212, 223, 229);
-}
-.duet-table-striped.duet-theme-turva tfoot td {
-  border-top-color: rgb(222, 224, 228);
-}
-.duet-table-striped.duet-table-flattened tbody:not(:first-of-type) th {
-  padding-top: 20px !important;
-}
-.duet-table-striped.duet-table-flattened tr {
-  padding: 20px !important;
-}
-.duet-table-striped.duet-table-flattened tfoot td {
-  border-top: 0;
-}
-.duet-table-striped.duet-table-flattened tfoot tr {
-  border-top: 1px solid rgb(212, 223, 229);
-}
-.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr {
-  border-top-color: rgb(222, 224, 228);
-}
-
-.duet-table-fixed th, .duet-table-minimal th, .duet-table-plain th {
-  padding: 16px !important;
-  border-bottom: 1px solid rgb(98, 121, 138);
-}
-.duet-table-fixed th:first-child, .duet-table-minimal th:first-child, .duet-table-plain th:first-child {
-  padding-left: 0 !important;
-}
-.duet-table-fixed th:last-child, .duet-table-minimal th:last-child, .duet-table-plain th:last-child {
-  padding-right: 0 !important;
-}
-.duet-theme-turva.duet-table-fixed th, .duet-theme-turva.duet-table-minimal th, .duet-theme-turva.duet-table-plain th {
-  border-bottom-color: rgb(113, 118, 132);
-}
-.duet-table-fixed tbody th, .duet-table-minimal tbody th, .duet-table-plain tbody th {
-  padding-top: 40px !important;
-  border-bottom-color: rgb(212, 223, 229);
-}
-.duet-theme-turva.duet-table-fixed tbody th, .duet-theme-turva.duet-table-minimal tbody th, .duet-theme-turva.duet-table-plain tbody th {
-  border-bottom-color: rgb(222, 224, 228);
-}
-.duet-table-fixed td, .duet-table-minimal td, .duet-table-plain td {
-  padding: 16px !important;
-}
-.duet-table-fixed td:first-child, .duet-table-minimal td:first-child, .duet-table-plain td:first-child {
-  padding-left: 0 !important;
-}
-.duet-table-fixed td:last-child, .duet-table-minimal td:last-child, .duet-table-plain td:last-child {
-  padding-right: 0 !important;
-}
-.duet-table-fixed tbody td, .duet-table-minimal tbody td, .duet-table-plain tbody td {
-  border-bottom: 1px solid rgb(212, 223, 229);
-}
-.duet-theme-turva.duet-table-fixed tbody td, .duet-theme-turva.duet-table-minimal tbody td, .duet-theme-turva.duet-table-plain tbody td {
-  border-bottom-color: rgb(222, 224, 228);
-}
-.duet-table-flattened.duet-table-fixed tbody:first-of-type th, .duet-table-flattened.duet-table-minimal tbody:first-of-type th, .duet-table-flattened.duet-table-plain tbody:first-of-type th {
-  padding-top: 0 !important;
-}
-.duet-table-flattened.duet-table-fixed td, .duet-table-flattened.duet-table-minimal td, .duet-table-flattened.duet-table-plain td,
-.duet-table-flattened.duet-table-fixed tbody th,
-.duet-table-flattened.duet-table-minimal tbody th,
-.duet-table-flattened.duet-table-plain tbody th {
-  border-bottom: 0;
-}
-.duet-table-flattened.duet-table-fixed tr, .duet-table-flattened.duet-table-minimal tr, .duet-table-flattened.duet-table-plain tr {
-  padding: 20px 0 !important;
-}
-.duet-table-flattened.duet-table-fixed tbody th, .duet-table-flattened.duet-table-minimal tbody th, .duet-table-flattened.duet-table-plain tbody th {
-  padding-top: 20px !important;
-}
-.duet-table-flattened.duet-table-fixed tfoot td, .duet-table-flattened.duet-table-minimal tfoot td, .duet-table-flattened.duet-table-plain tfoot td {
-  margin-bottom: 4px !important;
-}
-.duet-table-flattened.duet-table-fixed tbody:not(:only-of-type) tr:first-child, .duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child, .duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child {
-  border-bottom: 0;
-}
-
-.duet-table-plain.duet-table-flattened tbody tr {
-  border-bottom: 1px solid rgb(212, 223, 229);
-}
-.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr {
-  border-bottom-color: rgb(222, 224, 228);
-}
-
-.duet-table-minimal tbody tr,
-.duet-table-minimal tbody tr td {
-  vertical-align: top;
-  border-bottom: 0 none;
-}
-.duet-table-minimal tbody tr:last-of-type,
-.duet-table-minimal tbody tr:last-of-type td {
-  border-bottom: 1px solid rgb(212, 223, 229);
-}
-.duet-table-minimal.duet-table-flattened tbody tr,
-.duet-table-minimal.duet-table-flattened tbody tr td {
-  border-bottom: 0 none;
-}
-.duet-table-minimal.duet-table-flattened tbody tr td[data-heading]::before {
-  display: none;
-}
-.duet-table-minimal.duet-table-flattened tfoot {
-  border-top: 1px solid rgb(212, 223, 229);
-}
-.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot {
-  border-top-color: rgb(222, 224, 228);
-}
-
-.duet-table-fixed table {
-  table-layout: fixed;
-}
-.duet-table-fixed tbody tr,
-.duet-table-fixed tbody tr td,
-.duet-table-fixed tbody tr td:first-child {
-  padding: 4px !important;
-  vertical-align: text-bottom;
-  border-bottom: 0 none;
-}
-.duet-table-fixed thead {
-  display: none;
-}
-.duet-table-fixed tbody tr,
-.duet-table-fixed tbody tr td {
-  border-bottom: 0 none;
-}
-.duet-table-fixed:not(.duet-table-flattened) tfoot {
-  border-top: 1px solid rgb(212, 223, 229);
-}
-.duet-table-fixed:not(.duet-table-flattened).duet-theme-turva tfoot {
-  border-top-color: rgb(222, 224, 228);
-}
-
-.duet-table-scrollable {
-  position: relative;
-  width: 100%;
-  overflow-x: auto;
-  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0)), linear-gradient(-90deg, #fff 0%, rgba(255, 255, 255, 0)) 100% 0, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 100% 0%;
-  background-repeat: no-repeat;
-  background-attachment: local, local, scroll, scroll;
-  background-size: 100px 100%, 100px 100%, 12px 100%, 12px 100%;
-}
-
-.duet-table-selected-column {
-  background: rgba(0, 119, 179, 0.08);
-}
-.duet-theme-turva .duet-table-selected-column {
-  background: rgba(113, 118, 132, 0.08);
-}
-
-.duet-table-sortable tbody tr td:first-child,
-.duet-table-sortable thead tr th:first-child {
-  padding: 20px;
-}
-.duet-table-sortable:not(.duet-table-flattened) tfoot {
-  border-top: 1px solid rgb(212, 223, 229);
-}
-.duet-table-sortable:not(.duet-table-flattened).duet-theme-turva tfoot {
-  border-top-color: rgb(222, 224, 228);
-}
-
-.duet-table-actions table {
-  table-layout: auto;
-}
-.duet-table-actions thead th:last-child {
-  width: 1px;
-  white-space: nowrap;
-}
-
-.duet-editable-table-table.duet-table-flattened tr {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-auto-rows: auto;
-  gap: 10px;
-}
-.duet-editable-table-table.duet-table-flattened tr.duet-table-action-row td:last-child::before {
-  padding: 0;
-  content: "";
-}
-.duet-editable-table-table.duet-table-flattened td {
-  grid-column: 1/2;
-}
-.duet-editable-table-table.duet-table-flattened td:first-child {
-  grid-row: 1;
-  grid-column: 1;
-}
-.duet-editable-table-table.duet-table-flattened td:last-child {
-  grid-row: 1;
-  grid-column: 2;
-}

package/lib/dist-custom-elements/p-5fbb6039.js

@@ -1,154 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-d77db171.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { c as createID } from './p-5e59e970.js';
-
-const duetCheckboxCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:8px !important;margin-bottom:12px !important;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(:last-child:not(:only-child)){margin-bottom:0 !important}:host(.duet-m-0){margin:0 !important}.duet-label{position:relative;z-index:100;display:inline;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(8, 42, 77);vertical-align:top;cursor:pointer;background:transparent;transition:300ms ease}.duet-theme-turva .duet-label{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-label span{display:inline-block;width:calc(100% - 32px);font-size:1rem;font-weight:400;vertical-align:top}.duet-checkbox-container{position:relative;width:100%;height:100%}.duet-checkbox{padding:14px !important;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;cursor:pointer;opacity:0}.duet-checkbox+label::before{z-index:100;display:inline-block;width:20px;height:20px;margin:2px 10px 1px 1px;vertical-align:top;content:\"\";background:rgb(255, 255, 255);border:1px solid rgb(8, 42, 77);border-radius:4px}.duet-theme-turva .duet-checkbox+label::before{border-color:rgb(23, 28, 58)}.duet-checkbox:checked+label::before{background:rgb(0, 119, 179);border:1px solid rgb(0, 119, 179)}.duet-theme-turva .duet-checkbox:checked+label::before{background:rgb(23, 28, 58);border-color:rgb(23, 28, 58)}.duet-checkbox:focus+label::before{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-checkbox:focus+label::before{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-checkbox[aria-invalid=true]+label::before{background:#fdf4f6;border-color:rgb(214, 28, 82)}.duet-theme-turva .duet-checkbox[aria-invalid=true]+label::before{background:#fdf4f6;border-color:rgb(214, 28, 82)}.duet-checkbox+label{position:static}.duet-checkbox:checked+label::after{position:absolute;top:6px;left:5px;z-index:200;width:12px;height:12px;pointer-events:none;content:\"\";background:transparent url(\"data:image/svg+xml,%3Csvg%20fill%3D%27white%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M23.374.287a1.5%2C1.5%2C0%2C0%2C0-2.093.345L7.246%2C20.2%2C2.561%2C15.511A1.5%2C1.5%2C0%2C1%2C0%2C.439%2C17.632l5.935%2C5.934a1.525%2C1.525%2C0%2C0%2C0%2C2.279-.186l15.066-21A1.5%2C1.5%2C0%2C0%2C0%2C23.374.287Z%27%20%2F%3E%3C%2Fsvg%3E\") no-repeat 0 0;background-size:100% auto}.duet-checkbox[disabled]{cursor:default}.duet-checkbox[disabled]+label{color:rgb(98, 121, 138)}.duet-theme-turva .duet-checkbox[disabled]+label{color:rgb(143, 147, 158)}.duet-checkbox[disabled]+label::before{border-color:rgb(181, 198, 208)}.duet-theme-turva .duet-checkbox[disabled]+label::before{border-color:rgb(199, 202, 207)}.duet-checkbox[disabled]:checked+label::before{background:rgb(127, 150, 165);border:1px solid rgb(127, 150, 165)}.duet-theme-turva .duet-checkbox[disabled]:checked+label::before{background:rgb(143, 147, 158);border-color:rgb(143, 147, 158)}.duet-checkbox-error{margin-left:31px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(214, 28, 82);border-radius:4px}.duet-theme-turva .duet-checkbox-error{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(214, 28, 82)}.duet-label-hidden .duet-label span,.duet-label-hidden .duet-checkbox-error span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
-const DuetCheckboxStyle0 = duetCheckboxCss;
-
-const DuetCheckbox = /*@__PURE__*/ proxyCustomElement(class DuetCheckbox extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetChange = createEvent(this, "duetChange", 3);
-        this.duetFocus = createEvent(this, "duetFocus", 7);
-        this.duetBlur = createEvent(this, "duetBlur", 7);
-        /**
-         * Own Properties.
-         */
-        this.checkboxId = createID("DuetCheckbox");
-        this.errorId = createID("DuetError");
-        /**
-         * Component event handling.
-         */
-        this.onChange = (ev) => {
-            this.checked = !this.checked;
-            this.duetChange.emit({
-                originalEvent: ev,
-                checked: this.checked,
-                value: this.value,
-                component: "duet-checkbox",
-            });
-        };
-        this.onBlur = (ev) => {
-            this.duetBlur.emit({
-                originalEvent: ev,
-                checked: this.checked,
-                value: this.value,
-                component: "duet-checkbox",
-            });
-        };
-        this.onFocus = (ev) => {
-            this.duetFocus.emit({
-                originalEvent: ev,
-                checked: this.checked,
-                value: this.value,
-                component: "duet-checkbox",
-            });
-        };
-        this.getDescribedBy = () => {
-            const describedBy = [];
-            if (this.accessibleDescribedBy) {
-                describedBy.push(this.accessibleDescribedBy);
-            }
-            if (this.error) {
-                describedBy.push(this.errorId);
-            }
-            return describedBy.length > 0 ? describedBy.join(" ") : null;
-        };
-        this.accessibleActiveDescendant = undefined;
-        this.margin = "auto";
-        this.accessibleControls = undefined;
-        this.accessibleIndex = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleSelected = undefined;
-        this.accessibleLiveError = "polite";
-        this.required = false;
-        this.error = "";
-        this.theme = "";
-        this.disabled = false;
-        this.identifier = undefined;
-        this.label = "label";
-        this.labelHidden = false;
-        this.name = undefined;
-        this.role = undefined;
-        this.checked = false;
-        this.value = undefined;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        if (this.value === undefined) {
-            this.value = this.identifier;
-        }
-    }
-    /**
-     * Sets focus on the specified `duet-checkbox`. Use this method instead of the global
-     * `input.focus()`.
-     */
-    async setFocus(options) {
-        this.nativeInput.focus(options);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const identifier = this.identifier || this.checkboxId;
-        return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("div", { class: {
-                "duet-checkbox-container": true,
-                "duet-label-hidden": this.labelHidden,
-                "duet-theme-turva": this.theme === "turva",
-            } }, h("input", { ref: input => (this.nativeInput = input), type: "checkbox", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, class: { "duet-checkbox": true, disabled: this.disabled }, checked: this.checked, disabled: this.disabled, tabindex: this.accessibleIndex, "aria-invalid": this.error ? "true" : "false", "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-selected": this.accessibleSelected, required: this.required, role: this.role, name: this.name, id: identifier }), h("label", { class: "duet-label", htmlFor: identifier }, h("span", null, this.label)), h("div", { class: "duet-checkbox-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
-    }
-    get element() { return this; }
-    static get style() { return DuetCheckboxStyle0; }
-}, [1, "duet-checkbox", {
-        "accessibleActiveDescendant": [1, "accessible-active-descendant"],
-        "margin": [1],
-        "accessibleControls": [1, "accessible-controls"],
-        "accessibleIndex": [1, "accessible-index"],
-        "accessibleOwns": [1, "accessible-owns"],
-        "accessibleDescribedBy": [1, "accessible-described-by"],
-        "accessibleDetails": [1, "accessible-details"],
-        "accessibleLabelledBy": [1, "accessible-labelled-by"],
-        "accessibleDescription": [1, "accessible-description"],
-        "accessibleSelected": [1, "accessible-selected"],
-        "accessibleLiveError": [1, "accessible-live-error"],
-        "required": [4],
-        "error": [1],
-        "theme": [1025],
-        "disabled": [516],
-        "identifier": [1],
-        "label": [1],
-        "labelHidden": [4, "label-hidden"],
-        "name": [1],
-        "role": [1],
-        "checked": [1540],
-        "value": [1537],
-        "setFocus": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-checkbox"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-checkbox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetCheckbox);
-            }
-            break;
-    } });
-}
-
-export { DuetCheckbox as D, defineCustomElement as d };