@ds-autonomie/web-components 1.1.0 → 1.2.0

package/dist/custom-elements.json

@@ -13097,6 +13097,260 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/step/step.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DSAStep",
+          "slots": [
+            {
+              "description": "The step's title. Alternatively, you can use the `title` attribute.",
+              "name": "title"
+            },
+            {
+              "description": "The tooltip slot allows additional information to be passed along the title.",
+              "name": "tooltip"
+            },
+            {
+              "description": "The step's content. Alternatively, you can use the `content` attribute.",
+              "name": "content"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(\n    this,\n    'title',\n    'content'\n  )"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "status",
+              "type": {
+                "text": "DSAStepStatus"
+              },
+              "default": "'default'",
+              "description": "The step's status. There can only be one active step's state inside a stepper.\nThe `active` status defines the current step as the only active step on the page. It usually has related content  on the page like a form.",
+              "attribute": "status"
+            },
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The step's title. If you need to display HTML, use the `title` slot instead.",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "content",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The step's content. If you need to display HTML, use the `content` slot instead.",
+              "attribute": "content"
+            },
+            {
+              "kind": "field",
+              "name": "index",
+              "type": {
+                "text": "number"
+              },
+              "description": "Sets the step's index",
+              "attribute": "index"
+            },
+            {
+              "kind": "method",
+              "name": "getStepLabel",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "status",
+              "type": {
+                "text": "DSAStepStatus"
+              },
+              "default": "'default'",
+              "description": "The step's status. There can only be one active step's state inside a stepper.\nThe `active` status defines the current step as the only active step on the page. It usually has related content  on the page like a form.",
+              "fieldName": "status"
+            },
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The step's title. If you need to display HTML, use the `title` slot instead.",
+              "fieldName": "title"
+            },
+            {
+              "name": "content",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The step's content. If you need to display HTML, use the `content` slot instead.",
+              "fieldName": "content"
+            },
+            {
+              "name": "index",
+              "type": {
+                "text": "number"
+              },
+              "description": "Sets the step's index",
+              "fieldName": "index"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element"
+          },
+          "summary": "Step defines an element within a stepper.",
+          "documentation": "https://dsa.service-public-autonomie.fr/062dac5f6/p/45619f-step",
+          "dependencies": [
+            "dsa-icon",
+            "dsa-visually-hidden"
+          ],
+          "tagName": "dsa-step",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "DSAStep",
+            "module": "components/step/step.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "dsa-step",
+          "declaration": {
+            "name": "DSAStep",
+            "module": "components/step/step.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/step/step.utils.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "getStepIcon",
+          "parameters": [
+            {
+              "name": "status",
+              "type": {
+                "text": "DSAIconStepTypes"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "getStepIcon",
+          "declaration": {
+            "name": "getStepIcon",
+            "module": "components/step/step.utils.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/stepper/stepper.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DSAStepper",
+          "slots": [
+            {
+              "description": "The step options. Must be `<dsa-step>` elements.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "hideLabel",
+              "type": {
+                "text": "false"
+              },
+              "description": "When set to true, it hides all steps's label.",
+              "attribute": "hideLabel"
+            },
+            {
+              "kind": "method",
+              "name": "getAllSteps",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDefaultSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "hideLabel",
+              "type": {
+                "text": "false"
+              },
+              "description": "When set to true, it hides all steps's label.",
+              "fieldName": "hideLabel"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element"
+          },
+          "summary": "Stepper convey progress through numbered steps. It provides a wizard-like workflow.",
+          "documentation": "https://dsa.service-public-autonomie.fr/062dac5f6/p/448026-stepper",
+          "tagName": "dsa-stepper",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "DSAStepper",
+            "module": "components/stepper/stepper.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "dsa-stepper",
+          "declaration": {
+            "name": "DSAStepper",
+            "module": "components/stepper/stepper.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/tab/tab.js",
@@ -15651,7 +15905,7 @@
   ],
   "package": {
     "name": "@ds-autonomie/web-components",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "author": "CNSA",
     "license": "MIT"
   }

package/dist/design-system.d.ts

@@ -36,6 +36,8 @@ export { default as DSARadioButton } from './components/radio-button/radio-butto
 export { default as DSARelativeTime } from './components/relative-time/relative-time';
 export { default as DSASelect } from './components/select/select';
 export { default as DSASkeleton } from './components/skeleton/skeleton';
+export { default as DSAStep } from './components/step/step';
+export { default as DSAStepper } from './components/stepper/stepper';
 export { default as DSATab } from './components/tab/tab';
 export { default as DSATabGroup } from './components/tab-group/tab-group';
 export { default as DSATabPanel } from './components/tab-panel/tab-panel';

package/dist/design-system.js

@@ -1,40 +1,49 @@
 import "./chunks/chunk.HAL7R4WT.js";
-import {
-  DSAVisuallyHidden
-} from "./chunks/chunk.DSGUQNN4.js";
-import "./chunks/chunk.IOFPPNUO.js";
 import "./chunks/chunk.QL5C2XOW.js";
-import {
-  DSATextarea
-} from "./chunks/chunk.EDRQ2QWB.js";
-import "./chunks/chunk.VRY3E2XG.js";
 import {
   DSATooltip
-} from "./chunks/chunk.LSKBY2HF.js";
+} from "./chunks/chunk.5BTJP6HC.js";
 import "./chunks/chunk.EMJZLQCL.js";
 import {
   DSATree
-} from "./chunks/chunk.NKPNQBLW.js";
+} from "./chunks/chunk.AFAQWHMU.js";
+import "./chunks/chunk.73T7TU6S.js";
 import {
   DSATreeItem
-} from "./chunks/chunk.NBQ3AEK6.js";
-import "./chunks/chunk.73T7TU6S.js";
+} from "./chunks/chunk.MDFIMRCC.js";
 import "./chunks/chunk.EKWYMXQO.js";
-import {
-  DSATab
-} from "./chunks/chunk.DFTZEFHF.js";
-import "./chunks/chunk.FIGO7UV2.js";
 import {
   DSATabGroup
-} from "./chunks/chunk.L6LQN6AI.js";
+} from "./chunks/chunk.IJL7YMFL.js";
 import "./chunks/chunk.4A57I2HX.js";
 import {
   DSATabPanel
 } from "./chunks/chunk.NKVYNBAI.js";
 import "./chunks/chunk.5WAZTHII.js";
+import {
+  DSATextarea
+} from "./chunks/chunk.EDRQ2QWB.js";
+import "./chunks/chunk.VRY3E2XG.js";
+import {
+  DSAStep
+} from "./chunks/chunk.3I2KXA35.js";
+import {
+  DSAVisuallyHidden
+} from "./chunks/chunk.DSGUQNN4.js";
+import "./chunks/chunk.IOFPPNUO.js";
+import "./chunks/chunk.YRBTSDUN.js";
+import "./chunks/chunk.CCTWXABH.js";
+import {
+  DSAStepper
+} from "./chunks/chunk.QSNJ4FV6.js";
+import "./chunks/chunk.2WSMYCPC.js";
+import {
+  DSATab
+} from "./chunks/chunk.P2AJBSND.js";
+import "./chunks/chunk.FIGO7UV2.js";
 import {
   DSARelativeTime
-} from "./chunks/chunk.VIULAG23.js";
+} from "./chunks/chunk.DOMRNQHQ.js";
 import {
   DSAResizeObserver
 } from "./chunks/chunk.G3ESG6Q5.js";
@@ -65,18 +74,18 @@ import {
 import "./chunks/chunk.YZHDFJWJ.js";
 import {
   DSAProgressBar
-} from "./chunks/chunk.DZWH4V6H.js";
+} from "./chunks/chunk.RDVFMQLV.js";
 import "./chunks/chunk.SGIGGO5M.js";
 import {
   DSAInputPhone
-} from "./chunks/chunk.4MC32HP7.js";
+} from "./chunks/chunk.B4O7IAPL.js";
 import {
   DSASelect
-} from "./chunks/chunk.GJCVGGCP.js";
+} from "./chunks/chunk.JJ3GF7YP.js";
 import "./chunks/chunk.D6DEGG4H.js";
 import {
   DSAOption
-} from "./chunks/chunk.NOEQVLAW.js";
+} from "./chunks/chunk.4DWONP4W.js";
 import "./chunks/chunk.2DGAEK66.js";
 import "./chunks/chunk.6ZQ4OQ2C.js";
 import {
@@ -93,7 +102,7 @@ import {
 import "./chunks/chunk.3XRQRY25.js";
 import {
   DSAInput
-} from "./chunks/chunk.7EWUWW3E.js";
+} from "./chunks/chunk.FHGXKQDW.js";
 import "./chunks/chunk.KBT2EKLF.js";
 import {
   BICConfig,
@@ -102,7 +111,7 @@ import {
 } from "./chunks/chunk.ZKYSHEVZ.js";
 import {
   DSAInputMask
-} from "./chunks/chunk.F4XMSVNF.js";
+} from "./chunks/chunk.JLMY5OVR.js";
 import "./chunks/chunk.2HV2U4RQ.js";
 import "./chunks/chunk.SQMWMSBA.js";
 import {
@@ -116,28 +125,28 @@ import "./chunks/chunk.NNBOLKWI.js";
 import "./chunks/chunk.MTZZV3NB.js";
 import {
   DSAFormatBytes
-} from "./chunks/chunk.AYXPVAYS.js";
+} from "./chunks/chunk.FKIKQX6B.js";
 import {
   DSAFormatDate
-} from "./chunks/chunk.6BJBVSW4.js";
+} from "./chunks/chunk.OGQBKAFT.js";
 import {
   DSAFormatNumber
-} from "./chunks/chunk.V6V7AGDB.js";
+} from "./chunks/chunk.GRV3MK3D.js";
 import {
   DSADialog
-} from "./chunks/chunk.RSJYKNXT.js";
+} from "./chunks/chunk.NQU3YD5L.js";
 import {
   DSADivider
 } from "./chunks/chunk.AQRNB4GJ.js";
 import "./chunks/chunk.RY4QCT3T.js";
 import {
   DSADrawer
-} from "./chunks/chunk.ST2QYN4S.js";
+} from "./chunks/chunk.KOZIER6A.js";
 import "./chunks/chunk.ISAFRNR2.js";
 import "./chunks/chunk.DXVNWE2M.js";
 import {
   DSADropdown
-} from "./chunks/chunk.T7JSALXE.js";
+} from "./chunks/chunk.3HI3T5R2.js";
 import "./chunks/chunk.UEUTSYIH.js";
 import {
   DSACheckbox
@@ -152,10 +161,10 @@ import {
 import "./chunks/chunk.YY6AEXJK.js";
 import {
   DSACombobox
-} from "./chunks/chunk.R37CT3PN.js";
+} from "./chunks/chunk.OXSDZ5LQ.js";
 import {
   DSATag
-} from "./chunks/chunk.U5KRBVRP.js";
+} from "./chunks/chunk.K6YLMID4.js";
 import "./chunks/chunk.WFHOSUOX.js";
 import {
   DSAPopup
@@ -171,17 +180,17 @@ import "./chunks/chunk.7HGZSZJK.js";
 import "./chunks/chunk.PQWQ42E2.js";
 import {
   DSABreadcrumb
-} from "./chunks/chunk.QSPKKO3T.js";
+} from "./chunks/chunk.TINRLVWL.js";
 import {
   DSABreadcrumbItem
-} from "./chunks/chunk.CBMFAOZI.js";
+} from "./chunks/chunk.ORSUTGLR.js";
 import "./chunks/chunk.PULHNCDM.js";
 import {
   DSAButton
-} from "./chunks/chunk.W74UQSZJ.js";
+} from "./chunks/chunk.XJPCULMC.js";
 import {
   DSASpinner
-} from "./chunks/chunk.2CCKS3CP.js";
+} from "./chunks/chunk.ZXVIEHXI.js";
 import "./chunks/chunk.S4ATPBQN.js";
 import "./chunks/chunk.KIFBWPW5.js";
 import "./chunks/chunk.J2XNYTTZ.js";
@@ -207,11 +216,11 @@ import "./chunks/chunk.ZVGZDTBF.js";
 import "./chunks/chunk.IGYXUK7A.js";
 import {
   DSAAccordion
-} from "./chunks/chunk.HEOTAAPU.js";
+} from "./chunks/chunk.WG5VRMQG.js";
 import "./chunks/chunk.LC54322H.js";
 import {
   DSAAlert
-} from "./chunks/chunk.ILUHEJYG.js";
+} from "./chunks/chunk.LUHEO6AS.js";
 import {
   DSAIconButton
 } from "./chunks/chunk.EXIGM5NV.js";
@@ -220,7 +229,7 @@ import "./chunks/chunk.ZQJVCRB2.js";
 import "./chunks/chunk.B4BZKR24.js";
 import "./chunks/chunk.2FK6USFR.js";
 import "./chunks/chunk.V7RJROLH.js";
-import "./chunks/chunk.IQ7SDYSC.js";
+import "./chunks/chunk.NBPVVWJU.js";
 import {
   DSAIcon
 } from "./chunks/chunk.VRU3XH45.js";
@@ -295,6 +304,8 @@ export {
   DSASelect,
   DSASkeleton,
   DSASpinner,
+  DSAStep,
+  DSAStepper,
   DSATab,
   DSATabGroup,
   DSATabPanel,

package/dist/themes/dsa-wc-theme.css

@@ -1162,6 +1162,48 @@
   --dsa-wc-avatar-x-large-size: 3rem;
   --dsa-wc-avatar-x-large-font: var(--dsa-font-large-normal);
   --dsa-wc-avatar-group-margin-left: -0.75rem;
+  --dsa-wc-stepper-color-progress-complete: var(
+    --dsa-color-stepper-progress-complete
+  );
+  --dsa-wc-stepper-color-progress-default: var(
+    --dsa-color-stepper-progress-default
+  );
+  --dsa-wc-stepper-color-date-on-base: var(--dsa-color-stepper-date-on-base);
+  --dsa-wc-stepper-color-date-base: var(--dsa-color-stepper-date-base);
+  --dsa-wc-stepper-color-tag-blocked-on-base: var(
+    --dsa-color-tag-stepper-blocked-on-base
+  );
+  --dsa-wc-stepper-color-tag-blocked-base: var(
+    --dsa-color-tag-stepper-blocked-base
+  );
+  --dsa-wc-stepper-color-tag-error-on-base: var(
+    --dsa-color-tag-stepper-error-on-base
+  );
+  --dsa-wc-stepper-color-tag-error-base: var(
+    --dsa-color-tag-stepper-error-base
+  );
+  --dsa-wc-stepper-color-tag-in-progress-on-base: var(
+    --dsa-color-tag-stepper-in-progress-on-base
+  );
+  --dsa-wc-stepper-color-tag-in-progress-base: var(
+    --dsa-color-tag-stepper-in-progress-base
+  );
+  --dsa-wc-stepper-color-tag-complete-on-base: var(
+    --dsa-color-tag-stepper-complete-on-base
+  );
+  --dsa-wc-stepper-color-tag-complete-base: var(
+    --dsa-color-tag-stepper-complete-base
+  );
+  --dsa-wc-stepper-color-index: var(--dsa-color-text-on-base-secondary);
+  --dsa-wc-stepper-font-index: var(--dsa-font-2x-small-normal);
+  --dsa-wc-stepper-color-title: var(--dsa-color-text-on-base-primary);
+  --dsa-wc-stepper-font-title: var(--dsa-font-medium-bold);
+  --dsa-wc-stepper-font-content: var(--dsa-font-x-small-normal);
+  --dsa-wc-stepper-color-content: var(--dsa-color-text-on-base-secondary);
+  --dsa-wc-stepper-icon-border-width: 1.4px;
+  --dsa-wc-stepper-icon-border-style: solid;
+  --dsa-wc-stepper-icon-size: 26px;
+  --dsa-wc-stepper-icon-in-progress-size: 12px;
   --dsa-wc-link-on-base-color: var(--dsa-color-link-on-base-default);
   --dsa-wc-link-on-contrasted-color: var(
     --dsa-color-link-on-contrasted-visited