@duetds/components 10.0.0-alpha.8 → 10.0.0

package/lib/collection/components/duet-card/duet-card.js

@@ -18,6 +18,69 @@ import { getColorByName } from "../../utils/token-utils";
 export class DuetCard {
     constructor() {
         this.cardId = createID("DuetCard");
+        /**
+         * The content for the card heading. If empty, both heading and collapse
+         * functionality will be hidden.
+         */
+        this.heading = "";
+        /**
+         * Additional content for the card heading. If empty, both heading and collapse
+         * functionality will be hidden.
+         */
+        this.secondaryHeading = "";
+        /**
+         * Style variation of the card.
+         */
+        this.variation = "default";
+        /**
+         * Makes the card expand and collapse when the collapse/expand arrow in the
+         * heading is clicked or tapped. This option only works together with the
+         * heading option, meaning that you also need to set the heading for this
+         * functionality to show up.
+         */
+        this.collapsible = false;
+        /**
+         * If the card is collapsible, this property controls whether the card is open or closed.
+         */
+        this.open = true;
+        /**
+         * The actual heading level used for the heading in html markup. This setting
+         * exists for accessibility reasons. It doesn’t change the style visually.
+         * This setting is only used if the heading property is set.
+         * If you provide your own heading(s) in the slot, you should set this to neutral "div"
+         * in order to avoid nested headings.
+         */
+        this.headingLevel = "h2";
+        /**
+         * Custom color to be used for the icon, as a design token entered in camelCase
+         * or kebab-case. Example: "color-primary". This property can also be set to
+         * "currentColor".
+         */
+        this.iconColor = "currentColor";
+        /**
+         * Custom color to be used for the card background, as a design token entered in
+         * camelCase or kebab-case. Example: "primary".
+         */
+        this.background = "gray-lightest";
+        /**
+         * The padding for the card. Please note that the card padding values don’t directly
+         * translate to similar space token names, but instead the card uses it’s own
+         * derived defaults.
+         */
+        this.padding = "small";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Theme of the card.
+         */
+        this.theme = "";
+        /**
+         * Breakpoint used to remove shadow around card. These match to
+         * similar media query tokens: $media-query-small and $media-query-medium.
+         */
+        this.shadowBreakpoint = undefined;
         /**
          * Local methods.
          */
@@ -34,22 +97,6 @@ export class DuetCard {
                 this.togglePanel(e);
             }
         };
-        this.accessibleLabel = undefined;
-        this.heading = "";
-        this.secondaryHeading = "";
-        this.variation = "default";
-        this.collapsible = false;
-        this.open = true;
-        this.headingLevel = "h2";
-        this.headingBackground = undefined;
-        this.icon = undefined;
-        this.image = undefined;
-        this.background = "gray-lightest";
-        this.padding = "small";
-        this.margin = "auto";
-        this.theme = "";
-        this.url = undefined;
-        this.shadowBreakpoint = undefined;
     }
     /**
      * Component lifecycle events.
@@ -74,10 +121,12 @@ export class DuetCard {
         const headingStyles = {
             backgroundColor: getColorByName(this.headingBackground),
         };
-        const headingContent = (h(Fragment, null, h("div", { class: "duet-card-heading-grid" }, this.icon && (h(Fragment, null, h("duet-icon", { class: "duet-card-icon", name: this.icon, size: "medium", margin: "none", color: "currentColor" }), h("duet-spacer", { direction: "horizontal", size: "small" }))), h("div", { class: "duet-card-heading-text" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.secondaryHeading && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--inline" }, this.secondaryHeading))), this.collapsible && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("duet-icon", { class: "duet-card-caret", icon: arrowUpIcon.svg, size: "small", margin: "none", color: "currentColor" })))), this.secondaryHeading && (h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--new-line" }, this.secondaryHeading)), h("slot", { name: "below-heading" })));
+        const headingContent = (h(Fragment, null, h("div", { class: "duet-card-heading-grid" }, this.icon && (h(Fragment, null, h("duet-icon", { class: "duet-card-icon", name: this.icon, size: "medium", margin: "none", color: this.iconColor }), h("duet-spacer", { direction: "horizontal", size: "small" }))), h("div", { class: "duet-card-heading-text" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.secondaryHeading && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--inline" }, this.secondaryHeading))), this.collapsible && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("duet-icon", { class: "duet-card-caret", icon: arrowUpIcon.svg, size: "small", margin: "none", color: "currentColor" })))), this.secondaryHeading && (h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--new-line" }, this.secondaryHeading)), h("slot", { name: "below-heading" })));
         if (this.collapsible) {
             const ariaLabel = (_a = getElementsFromNamedSlot(this.element, "heading")) === null || _a === void 0 ? void 0 : _a.map(e => e.textContent).join(" ");
-            return (h(HeadingTag, { style: headingStyles, class: "duet-card-heading duet-card-heading--collapsible", onClick: this.togglePanel, onKeyDown: this.handleKeyDown }, h("button", { type: "button", "aria-controls": this.cardId, "aria-expanded": this.open ? "true" : "false", "aria-label": ariaLabel }, headingContent)));
+            return (h(HeadingTag, { style: headingStyles, class: "duet-card-heading duet-card-heading--collapsible", onClick: this.togglePanel, onKeyDown: this.handleKeyDown }, h("button", { type: "button", class: {
+                    "duet-theme-turva": this.theme === "turva",
+                }, "aria-controls": this.cardId, "aria-expanded": this.open ? "true" : "false", "aria-label": ariaLabel }, headingContent)));
         }
         else {
             return (h(HeadingTag, { style: headingStyles, class: "duet-card-heading" }, headingContent));
@@ -102,10 +151,10 @@ export class DuetCard {
         const styles = {
             backgroundColor: getColorByName(this.background),
         };
-        return (h(Host, { key: '81af7af276b2b67f13855aa9e11bd95e8abeaa2d', class: {
+        return (h(Host, { key: 'd92cd6fb922f1165e1d341221ac3f5433252606c', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-card-info": this.variation === "info",
-            } }, h(TagName, { key: '9c121ca16ed478f72e8c5976cc73499de2c48de2', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
+            } }, h(TagName, { key: '7f870fc5061cd48c3464bd19ecd780fbb33f3e78', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
                 "duet-card": true,
                 [this.padding]: true,
                 [this.variation]: true,
@@ -115,7 +164,7 @@ export class DuetCard {
                 "duet-card-has-bg": this.background !== "gray-lightest",
                 "duet-card-has-icon": !!this.icon,
                 "duet-card-collapsed": this.collapsible && !this.open,
-            } }, this.image && (h("div", { key: '370ab67ee9e9e00267dfe6a034d9258fc41deb9c', class: "duet-card-image-mask" }, h("img", { key: 'f93b70812e33b71f9057b5a890baba36894012ea', src: this.image, class: "duet-card-image", loading: "lazy", alt: "", "aria-hidden": "true" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: '64b6d8e1e2d02085fa6101f54cf95f15c6c4e3b8', class: "duet-card-content", id: this.cardId }, h("slot", { key: '9a20c3971a53038f5786c9321214cd2dc19bdcef' }), this.hasFooter && (h("div", { key: '5009d44d6ffb5c7d6774a0c22664979d84a12561', class: "duet-card-footer" }, h("slot", { key: 'e177a2f18a636b5e6c093150e52614e56ad56c68', name: "footer" })))))));
+            } }, this.image && (h("div", { key: 'fd6822d5747d2882842c9c2392b28d8b7a2693f2', class: "duet-card-image-mask" }, h("img", { key: 'a1952cf1f82a4f8593130d9990ef27a2a982e5d8', src: this.image, class: "duet-card-image", loading: "lazy", alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: 'a11237f14582fad87aaab15e4dccad5c6ffd7b0b', class: "duet-card-content", id: this.cardId }, h("slot", { key: '80d250aa9dbb0f39a7683c6d2a1e1cdaca75cdd8' }), this.hasFooter && (h("div", { key: '87b27d7c69e3d5f3ab7bdb75cc76a1a11900ef0f', class: "duet-card-footer" }, h("slot", { key: '1212e0d9a33349cf68c7b667069077e02ee30197', name: "footer" })))))));
     }
     static get is() { return "duet-card"; }
     static get encapsulation() { return "shadow"; }
@@ -133,6 +182,7 @@ export class DuetCard {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -147,11 +197,11 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "heading": {
                 "type": "string",
+                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -166,12 +216,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "secondaryHeading": {
                 "type": "string",
+                "attribute": "secondary-heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -186,12 +236,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "secondary-heading",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetCardVariation",
@@ -212,12 +262,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "collapsible": {
                 "type": "boolean",
+                "attribute": "collapsible",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -232,12 +282,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapsible",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -252,12 +302,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "true"
             },
             "headingLevel": {
                 "type": "string",
+                "attribute": "heading-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetCardHeadingLevel",
@@ -278,12 +328,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-level",
                 "reflect": false,
                 "defaultValue": "\"h2\""
             },
             "headingBackground": {
                 "type": "string",
+                "attribute": "heading-background",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor | undefined",
@@ -304,11 +354,11 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-background",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -329,11 +379,37 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
+            "iconColor": {
+                "type": "string",
+                "attribute": "icon-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetColor",
+                    "resolved": "string",
+                    "references": {
+                        "DuetColor": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom color to be used for the icon, as a design token entered in camelCase\nor kebab-case. Example: \"color-primary\". This property can also be set to\n\"currentColor\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "\"currentColor\""
+            },
             "image": {
                 "type": "string",
+                "attribute": "image",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -348,11 +424,30 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image",
+                "reflect": false
+            },
+            "imageAlt": {
+                "type": "string",
+                "attribute": "image-alt",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt attribute text for the image. If not provided, image is assigned presentation role."
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "background": {
                 "type": "string",
+                "attribute": "background",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -373,12 +468,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "background",
                 "reflect": false,
                 "defaultValue": "\"gray-lightest\""
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetCardPadding",
@@ -399,12 +494,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -425,12 +520,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -451,12 +546,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -471,11 +566,11 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
                 "reflect": false
             },
             "shadowBreakpoint": {
                 "type": "string",
+                "attribute": "shadow-breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetBreakpoints",
@@ -496,7 +591,6 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "shadow-breakpoint",
                 "reflect": false,
                 "defaultValue": "undefined"
             }

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

@@ -4,11 +4,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
@@ -20,15 +20,19 @@
   margin-right: 0 !important;
 }
 
+[alignment=form-distribute] > :host(:last-of-type:not(:last-child)) {
+  margin-right: 8px !important;
+}
+
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-bottom: 12px !important;
   display: inline-flex;
   width: 100%;
@@ -52,8 +56,8 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: rgb(8, 42, 77);
   vertical-align: top;
+  color: rgb(8, 42, 77);
   cursor: pointer;
   background: transparent;
   transition: 300ms ease;
@@ -111,10 +115,17 @@
   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;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-checkbox:focus + label::before, .duet-checkbox:focus + label::before.duet-theme-turva, .duet-theme-turva2 .duet-checkbox:focus + label::before, .duet-checkbox:focus + label::before.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .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;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-checkbox[aria-invalid=true] + label::before {
   background: #fdf4f6;
@@ -185,6 +196,17 @@
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   border: 0;
+  clip: rect(0 0 0 0);
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-label {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-checkbox + label::before {
+  border-color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-checkbox:checked + label::before {
+  background: rgb(23, 42, 59);
+  border-color: rgb(23, 42, 59);
 }