@daikin-oss/design-system-web-components 1.5.1 → 1.5.2

package/CHANGELOG.md

@@ -1,5 +1,95 @@
 # @daikin-oss/design-system-web-components
 
+## 1.5.2
+
+### Patch Changes
+
+- [#398](https://github.com/dsv-rp/DDS/pull/398) [`65a352d`](https://github.com/dsv-rp/DDS/commit/65a352dbd6d59af7d59b9bf5f1669296fd9cd7a2) Thanks [@yodas7](https://github.com/yodas7)! - Added `focus()` method override to delegate focus to the inner focusable element via the host element.
+
+  - Breadcrumb Item
+  - Checkbox
+  - Date Picker
+  - Link
+  - Slider
+  - Table Header Cell
+  - Text Area
+  - Text Field
+  - Text Masked Field
+  - Time Picker
+  - Toggle
+
+- [#399](https://github.com/dsv-rp/DDS/pull/399) [`38579fe`](https://github.com/dsv-rp/DDS/commit/38579fe1b71103817ca3dbb28f516a1929b0f2ef) Thanks [@dk-wei](https://github.com/dk-wei)! - Navigation (Storybook): Added kitchen sink page.
+
+- [#402](https://github.com/dsv-rp/DDS/pull/402) [`7c71f50`](https://github.com/dsv-rp/DDS/commit/7c71f50b7a00c5195b42e5a8ce20d84c2a3dbdcb) Thanks [@dk-wei](https://github.com/dk-wei)! - Modal Footer (Storybook): Added kitchen sink page.
+
+- [#394](https://github.com/dsv-rp/DDS/pull/394) [`dd7b1d3`](https://github.com/dsv-rp/DDS/commit/dd7b1d35f2286b500356c7a6fbe5d2790cb4ad78) Thanks [@dk-wei](https://github.com/dk-wei)! - Tag (Storybook): Added kitchen sink page.
+
+- [#381](https://github.com/dsv-rp/DDS/pull/381) [`a89336c`](https://github.com/dsv-rp/DDS/commit/a89336c3016930fda3de0cf9aa62c9065a1a30cb) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Unified the text wrapping strategy within the following components. (DDS-2959)
+
+  - Card Header
+  - Checkbox
+  - Link
+  - Progress Bar
+  - Progress Indicator Item
+  - Radio Button
+  - Table Header Cell
+  - Tree Item
+
+  Table Header: Fixed an issue where the left icon was being compressed when the text was too long. (DDS-2963)
+  Fixed an issue where the content shifted when toggling the component borders. (DDS-2960)
+
+  - Card
+  - Accordion
+  - Icon Button
+  - Button
+
+- [#397](https://github.com/dsv-rp/DDS/pull/397) [`311297a`](https://github.com/dsv-rp/DDS/commit/311297a587ea23578f414f8e55011bc0e33f206d) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Menu: Prevent the menu from flipping or shifting when used with a navigation item. (DDS-2978)
+
+## 1.5.2-next.0
+
+### Patch Changes
+
+- [#398](https://github.com/dsv-rp/DDS/pull/398) [`65a352d`](https://github.com/dsv-rp/DDS/commit/65a352dbd6d59af7d59b9bf5f1669296fd9cd7a2) Thanks [@yodas7](https://github.com/yodas7)! - Added `focus()` method override to delegate focus to the inner focusable element via the host element.
+
+  - Breadcrumb Item
+  - Checkbox
+  - Date Picker
+  - Link
+  - Slider
+  - Table Header Cell
+  - Text Area
+  - Text Field
+  - Text Masked Field
+  - Time Picker
+  - Toggle
+
+- [#399](https://github.com/dsv-rp/DDS/pull/399) [`38579fe`](https://github.com/dsv-rp/DDS/commit/38579fe1b71103817ca3dbb28f516a1929b0f2ef) Thanks [@dk-wei](https://github.com/dk-wei)! - Navigation (Storybook): Added kitchen sink page.
+
+- [#402](https://github.com/dsv-rp/DDS/pull/402) [`7c71f50`](https://github.com/dsv-rp/DDS/commit/7c71f50b7a00c5195b42e5a8ce20d84c2a3dbdcb) Thanks [@dk-wei](https://github.com/dk-wei)! - Modal Footer (Storybook): Added kitchen sink page.
+
+- [#394](https://github.com/dsv-rp/DDS/pull/394) [`dd7b1d3`](https://github.com/dsv-rp/DDS/commit/dd7b1d35f2286b500356c7a6fbe5d2790cb4ad78) Thanks [@dk-wei](https://github.com/dk-wei)! - Tag (Storybook): Added kitchen sink page.
+
+- [#381](https://github.com/dsv-rp/DDS/pull/381) [`a89336c`](https://github.com/dsv-rp/DDS/commit/a89336c3016930fda3de0cf9aa62c9065a1a30cb) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Unified the text wrapping strategy within the following components. (DDS-2959)
+
+  - Card Header
+  - Checkbox
+  - Link
+  - Progress Bar
+  - Progress Indicator Item
+  - Radio Button
+  - Table Header Cell
+  - Tree Item
+
+  Table Header: Fixed an issue where the left icon was being compressed when the text was too long. (DDS-2963)
+  Fixed an issue where the content shifted when toggling the component borders. (DDS-2960)
+
+  - Card
+  - Accordion
+  - Icon Button
+  - Button
+
+- [#397](https://github.com/dsv-rp/DDS/pull/397) [`311297a`](https://github.com/dsv-rp/DDS/commit/311297a587ea23578f414f8e55011bc0e33f206d) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Menu: Prevent the menu from flipping or shifting when used with a navigation item. (DDS-2978)
+
 ## 1.5.1
 
 ### Patch Changes

package/custom-elements.json

@@ -1171,30 +1171,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/es/constants/events.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "EVENT_CLOSE",
-          "type": {
-            "text": "string"
-          },
-          "default": "\"close\""
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "EVENT_CLOSE",
-          "declaration": {
-            "name": "EVENT_CLOSE",
-            "module": "src/constants/events.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/es/components/index.js",
@@ -1706,6 +1682,30 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/es/constants/events.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "EVENT_CLOSE",
+          "type": {
+            "text": "string"
+          },
+          "default": "\"close\""
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "EVENT_CLOSE",
+          "declaration": {
+            "name": "EVENT_CLOSE",
+            "module": "src/constants/events.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/es/controllers/click-outside.js",
@@ -2766,7 +2766,7 @@
               "kind": "field",
               "name": "border",
               "type": {
-                "text": "AccordionVariantProps[\"border\"]"
+                "text": "\"vertical\" | \"all\" | \"none\""
               },
               "default": "\"vertical\"",
               "description": "The border type of the accordion.\n- `vertical`: Display the top and bottom border style.\n- `all`: Box border style.\n- `none`: No border style.",
@@ -2923,7 +2923,7 @@
             {
               "name": "border",
               "type": {
-                "text": "AccordionVariantProps[\"border\"]"
+                "text": "\"vertical\" | \"all\" | \"none\""
               },
               "default": "\"vertical\"",
               "description": "The border type of the accordion.\n- `vertical`: Display the top and bottom border style.\n- `all`: Box border style.\n- `none`: No border style.",
@@ -3858,6 +3858,17 @@
               "attribute": "show-visited",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "breadcrumbAriaLabel",
+              "type": {
+                "text": "string"
+              },
+              "description": "The aria-label of the breadcrumb.\nIt's recommended to provide a more specific aria-label for the breadcrumb, especially when there are multiple breadcrumb components on the same page, to help users distinguish between them.",
+              "default": "\"Breadcrumb\"",
+              "attribute": "breadcrumb-aria-label",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "_items",
@@ -3985,6 +3996,15 @@
               "default": "false",
               "description": "Whether or not to change the color of visited links.",
               "fieldName": "showVisited"
+            },
+            {
+              "name": "breadcrumb-aria-label",
+              "type": {
+                "text": "string"
+              },
+              "description": "The aria-label of the breadcrumb.\nIt's recommended to provide a more specific aria-label for the breadcrumb, especially when there are multiple breadcrumb components on the same page, to help users distinguish between them.",
+              "default": "\"Breadcrumb\"",
+              "fieldName": "breadcrumbAriaLabel"
             }
           ],
           "superclass": {
@@ -4122,6 +4142,35 @@
               "attribute": "breadcrumb-aria-expanded",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "_focusableRef",
+              "type": {
+                "text": "Ref<HTMLElement>"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "focus options"
+                }
+              ],
+              "description": "Focuses on the inner focusable element."
+            },
             {
               "kind": "method",
               "name": "getDDSNavigationTarget",
@@ -6385,6 +6434,35 @@
               "description": "Specify the checkbox disabled state controlled by the parent component.\nControlled by `daikin-checkbox-group`.",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_inputRef",
+              "type": {
+                "text": "Ref<HTMLInputElement>"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "focus options"
+                }
+              ],
+              "description": "Focuses on the inner checkbox."
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -8566,6 +8644,26 @@
               },
               "default": "null"
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "focus options"
+                }
+              ],
+              "description": "Focuses on the inner date input."
+            },
             {
               "kind": "method",
               "name": "reflectInputGroup",
@@ -11714,6 +11812,35 @@
               "attribute": "no-underline",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "_anchorRef",
+              "type": {
+                "text": "Ref<HTMLAnchorElement>"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "focus options"
+                }
+              ],
+              "description": "Focuses on the inner anchor."
+            },
             {
               "kind": "method",
               "name": "getDDSNavigationTarget",
@@ -12963,6 +13090,16 @@
               "name": "_hostStyles",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_staticPlacement",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Controls whether the floating-ui `flip()` and `shift()` middleware are active.\n\n- **`flip()`** — When there is insufficient space on the side specified by `placement`, the menu\n  is automatically repositioned to the opposite side (e.g. `bottom` → `top`).\n- **`shift()`** — Keeps the menu within the viewport by nudging it along the cross-axis when it\n  would otherwise overflow the screen edge.\n\nBoth middlewares are disabled when the trigger element is a `daikin-navigation-item`."
+            },
             {
               "kind": "field",
               "name": "triggerElement",
@@ -16579,6 +16716,26 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "focus options"
+                }
+              ],
+              "description": "Focuses on the inner slider thumb."
+            },
             {
               "kind": "field",
               "name": "value",
@@ -18442,6 +18599,35 @@
               "attribute": "order",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "_focusableRef",
+              "type": {
+                "text": "Ref<HTMLButtonElement>"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "focus options"
+                }
+              ],
+              "description": "Focuses on the inner button.\nOnly effective when `sortable` is `true`."
+            },
             {
               "kind": "field",
               "name": "version",
@@ -19309,6 +19495,15 @@
               "default": "null",
               "description": "The label text used as the value of aria-label.\nSet automatically by `reflectInputGroup` method."
             },
+            {
+              "kind": "field",
+              "name": "_textareaRef",
+              "type": {
+                "text": "Ref<HTMLTextAreaElement>"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "count",
@@ -19353,6 +19548,26 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "focus options"
+                }
+              ],
+              "description": "Focuses on the inner textarea."
+            },
             {
               "kind": "method",
               "name": "reflectInputGroup",
@@ -19964,6 +20179,35 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_inputRef",
+              "type": {
+                "text": "Ref<HTMLInputElement>"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "focus options"
+                }
+              ],
+              "description": "Focuses on the inner input."
+            },
             {
               "kind": "method",
               "name": "_handleChange",
@@ -20856,6 +21100,26 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "focus options"
+                }
+              ],
+              "description": "Focuses on the inner input."
+            },
             {
               "kind": "method",
               "name": "_createIcon",
@@ -21893,6 +22157,26 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "focus options"
+                }
+              ],
+              "description": "Focuses on the inner time input."
+            },
             {
               "kind": "method",
               "name": "reflectInputGroup",
@@ -22976,6 +23260,35 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "_inputRef",
+              "type": {
+                "text": "Ref<HTMLInputElement>"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "focus options"
+                }
+              ],
+              "description": "Focuses on the inner input."
+            },
             {
               "kind": "method",
               "name": "_updateFormValue",

package/dist/cjs/base/dds-element.cjs

@@ -84,6 +84,6 @@ const _DDSElement = class _DDSElement extends lit.LitElement {
     return this[key];
   }
 };
-_DDSElement.version = "1.5.1";
+_DDSElement.version = "1.5.2";
 let DDSElement = _DDSElement;
 exports.DDSElement = DDSElement;

package/dist/cjs/components/accordion/daikin-accordion.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
@@ -19,15 +18,6 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaAccordion = classVarianceAuthority.cva(["w-full"], {
-  variants: {
-    border: {
-      vertical: ["border-y border-ddt-color-divider"],
-      all: ["border border-ddt-color-divider"],
-      none: []
-    }
-  }
-});
 exports.DaikinAccordion = class DaikinAccordion extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
@@ -62,7 +52,7 @@ exports.DaikinAccordion = class DaikinAccordion extends ddsElement.DDSElement {
     }
   }
   render() {
-    return lit.html`<div class=${cvaAccordion({ border: this.border })}>
+    return lit.html`<div class="w-full">
       <slot
         @accordion-move-focus=${this._handleMoveFocus}
         @toggle=${this._handleToggle}
@@ -76,6 +66,34 @@ exports.DaikinAccordion.styles = lit.css`
 
     :host {
       min-width: 10rem;
+      position: relative;
+    }
+
+    :host([border="vertical"])::before {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      inset: 0px;
+      border-top: 1px solid var(--dds-color-divider) !important;
+      border-bottom: 1px solid var(--dds-color-divider) !important;
+      z-index: 1;
+      isolation: isolate;
+      pointer-events: none;
+    }
+
+    :host([border="all"])::before {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      inset: 0px;
+      border: 1px solid var(--dds-color-divider) !important;
+      z-index: 1;
+      isolation: isolate;
+      pointer-events: none;
     }
 
     :host(:not([border="none"])) ::slotted(daikin-accordion-item) {

package/dist/cjs/components/accordion/daikin-accordion.d.cts

@@ -1,9 +1,4 @@
 import { DDSElement } from "../../base/index.cjs";
-import { MergeVariantProps } from "../../type-utils.cjs";
-declare const cvaAccordion: (props?: ({
-    border?: "vertical" | "all" | "none" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type AccordionVariantProps = MergeVariantProps<typeof cvaAccordion>;
 /**
  * The accordion component serves as the parent element that organizes and manages the overall structure of the accordion.
  * Currently it only provides appropriate styles for individual accordion items.
@@ -47,7 +42,7 @@ export declare class DaikinAccordion extends DDSElement {
      *
      * @default "vertical"
      */
-    border: AccordionVariantProps["border"];
+    border: "vertical" | "all" | "none";
     /**
      * A list of the names of the open items.
      * If `exclusive` is true, the number of elements is 0 or 1.