@ds-autonomie/web-components 2.10.0 → 2.11.1

package/dist/internal/components/form-control/form-control-layout-stories.js

@@ -1,13 +1,12 @@
 import { errorArgTypes, errorMessageArgTypes, } from '../../../components/error-text/error-text-stories';
 export const formControlLayoutArgTypes = {
-    title: {
-        name: 'title',
-        description: 'The title contains a text representing advisory information related to the element it belongs to.',
+    'accessible-name': {
+        name: 'accessible-name',
+        type: { name: 'string', required: false },
+        description: 'Provides an accessible label for the element',
         table: {
-            defaultValue: { summary: "''" },
-            type: {
-                summary: 'string',
-            },
+            type: { summary: 'string' },
+            category: 'Form controls common',
         },
         control: { type: 'text' },
     },
@@ -19,6 +18,7 @@ export const formControlLayoutArgTypes = {
             type: {
                 summary: 'string',
             },
+            category: 'Form controls common',
         },
         control: { type: 'text' },
     },
@@ -30,6 +30,7 @@ export const formControlLayoutArgTypes = {
             type: {
                 summary: "'small' | 'medium' | 'large'",
             },
+            category: 'Form controls common',
         },
         control: { type: 'select' },
         options: ['small', 'medium', 'large'],
@@ -42,6 +43,7 @@ export const formControlLayoutArgTypes = {
             type: {
                 summary: "'base' | 'layer' ",
             },
+            category: 'Form controls common',
         },
         control: { type: 'select' },
         options: ['base', 'layer'],
@@ -54,6 +56,7 @@ export const formControlLayoutArgTypes = {
             type: {
                 summary: 'string',
             },
+            category: 'Form controls common',
         },
         control: { type: 'text' },
     },
@@ -65,6 +68,7 @@ export const formControlLayoutArgTypes = {
             type: {
                 summary: 'string',
             },
+            category: 'Form controls common',
         },
         control: { type: 'text' },
     },
@@ -76,6 +80,7 @@ export const formControlLayoutArgTypes = {
             type: {
                 summary: 'boolean',
             },
+            category: 'Form controls common',
         },
         control: { type: 'boolean' },
     },
@@ -87,6 +92,7 @@ export const formControlLayoutArgTypes = {
             type: {
                 summary: 'string',
             },
+            category: 'Form controls common',
         },
         control: { type: 'text' },
     },
@@ -98,6 +104,7 @@ export const formControlLayoutArgTypes = {
             type: {
                 summary: 'boolean',
             },
+            category: 'Form controls common',
         },
         control: { type: 'boolean' },
     },
@@ -111,6 +118,7 @@ export const formControlLayoutArgTypes = {
             type: {
                 summary: 'string',
             },
+            category: 'Form controls common',
         },
         control: { type: 'text' },
     },
@@ -122,6 +130,7 @@ export const formControlLayoutArgTypes = {
             type: {
                 summary: 'boolean',
             },
+            category: 'Form controls common',
         },
         control: { type: 'boolean' },
     },
@@ -130,7 +139,22 @@ export const formControlLayoutArgTypes = {
         description: 'Provides an accessible description for the element.',
         table: {
             type: { summary: 'string' },
+            category: 'Form controls common',
         },
         control: { type: 'text' },
     },
+    validity: {
+        name: 'validity',
+        description: 'Gets the validity state object',
+        table: {
+            category: 'Form controls common',
+        },
+    },
+    validationMessage: {
+        name: 'validationMessage',
+        description: 'Gets the validation message',
+        table: {
+            category: 'Form controls common',
+        },
+    },
 };

package/dist/internal/components/form-control/form-control-layout.d.ts

@@ -3,8 +3,10 @@ import { ShoelaceElement } from '../../shoelace-element';
 import { HasSlotController } from '../../slot';
 export declare class FormControlLayout extends ShoelaceElement {
     protected readonly hasSlotController: HasSlotController;
-    /** The title contains a text representing advisory information related to the element it belongs to. */
+    /** (deprecated) The title contains a text representing advisory information related to the element it belongs to. */
     title: string;
+    /** Provides an accessible label for the input element */
+    accessibleName: string;
     /** The name of the form control, submitted as a name/value pair with form data. */
     name: string;
     /** The form control's size. */

package/dist/internal/components/form-control/form-control-layout.js

@@ -17,7 +17,7 @@ export class FormControlLayout extends ShoelaceElement {
     constructor() {
         super(...arguments);
         this.hasSlotController = new HasSlotController(this, 'help-text', 'label', 'prefix', 'suffix', 'tooltip');
-        /** The title contains a text representing advisory information related to the element it belongs to. */
+        /** (deprecated) The title contains a text representing advisory information related to the element it belongs to. */
         this.title = '';
         /** The name of the form control, submitted as a name/value pair with form data. */
         this.name = '';
@@ -73,7 +73,10 @@ export class FormControlLayout extends ShoelaceElement {
         const hasHelpTextSlot = this.hasSlotController.test('help-text');
         const hasLabel = this.label ? true : !!hasLabelSlot;
         const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
-        if (!hasLabel && !this.title) {
+        if (this.title) {
+            console.warn('The `title` attribute is deprecated since it can cause redundant enunciation by screen readers, and will be removed in the next major release. Please use the accessible-name attribute instead.');
+        }
+        if (!hasLabel && !this.accessibleName && !this.title) {
             a11yWarning('Form controls require a label attribute or a label slot for accessibility');
         }
         if (this.error && !this.errorMessage) {
@@ -145,6 +148,9 @@ export class FormControlLayout extends ShoelaceElement {
 __decorate([
     property()
 ], FormControlLayout.prototype, "title", void 0);
+__decorate([
+    property({ attribute: 'accessible-name', reflect: true })
+], FormControlLayout.prototype, "accessibleName", void 0);
 __decorate([
     property()
 ], FormControlLayout.prototype, "name", void 0);

package/dist/internal/components/input-base/input-base-stories.js

@@ -8,6 +8,7 @@ export const inputBaseGlobalArgTypes = Object.assign(Object.assign({}, formContr
             type: {
                 summary: 'string',
             },
+            category: 'Inputs common',
         },
         control: { type: 'text' },
     }, pattern: {
@@ -18,6 +19,7 @@ export const inputBaseGlobalArgTypes = Object.assign(Object.assign({}, formContr
             type: {
                 summary: 'string',
             },
+            category: 'Inputs common',
         },
         control: { type: 'text' },
     }, minlength: {
@@ -27,6 +29,7 @@ export const inputBaseGlobalArgTypes = Object.assign(Object.assign({}, formContr
             type: {
                 summary: 'number',
             },
+            category: 'Inputs common',
         },
         control: { type: 'number' },
     }, maxlength: {
@@ -36,6 +39,7 @@ export const inputBaseGlobalArgTypes = Object.assign(Object.assign({}, formContr
             type: {
                 summary: 'number',
             },
+            category: 'Inputs common',
         },
         control: { type: 'number' },
     }, '?counter': {
@@ -45,6 +49,7 @@ export const inputBaseGlobalArgTypes = Object.assign(Object.assign({}, formContr
             type: {
                 summary: 'boolean',
             },
+            category: 'Inputs common',
         },
         control: { type: 'boolean' },
     }, min: {
@@ -54,6 +59,7 @@ export const inputBaseGlobalArgTypes = Object.assign(Object.assign({}, formContr
             type: {
                 summary: 'number | string',
             },
+            category: 'Inputs common',
         },
         control: { type: 'number' },
     }, max: {
@@ -63,6 +69,7 @@ export const inputBaseGlobalArgTypes = Object.assign(Object.assign({}, formContr
             type: {
                 summary: 'number | string',
             },
+            category: 'Inputs common',
         },
         control: { type: 'number' },
     }, step: {
@@ -70,6 +77,7 @@ export const inputBaseGlobalArgTypes = Object.assign(Object.assign({}, formContr
         description: 'Specifies the granularity that the value must adhere to, or the special value any which means no stepping is implied, allowing any numeric value. Only applies to date and number input types',
         table: {
             type: { summary: "'number | 'any'" },
+            category: 'Inputs common',
         },
         control: { type: 'number' },
     }, autocorrect: {
@@ -77,12 +85,14 @@ export const inputBaseGlobalArgTypes = Object.assign(Object.assign({}, formContr
         description: "Indicates whether the browser's autocorrect feature is on or off",
         table: {
             type: { summary: "'off' | 'on'" },
+            category: 'Inputs common',
         },
     }, autocomplete: {
         name: 'autocomplete',
         description: 'Specifies what permission the browser has to provide assistance in filling out form field values. Refer to this page on MDN for available values',
         table: {
             type: { summary: 'string' },
+            category: 'Inputs common',
         },
         control: { type: 'text' },
     }, autofocus: {
@@ -90,6 +100,7 @@ export const inputBaseGlobalArgTypes = Object.assign(Object.assign({}, formContr
         description: 'Indicates that the input should receive focus on page load',
         table: {
             type: { summary: 'boolean' },
+            category: 'Inputs common',
         },
     }, enterkeyhint: {
         name: 'enterkeyhint',
@@ -98,6 +109,7 @@ export const inputBaseGlobalArgTypes = Object.assign(Object.assign({}, formContr
             type: {
                 summary: "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
             },
+            category: 'Inputs common',
         },
     }, spellcheck: {
         name: 'spellcheck',
@@ -107,6 +119,7 @@ export const inputBaseGlobalArgTypes = Object.assign(Object.assign({}, formContr
                 summary: 'boolean',
             },
             defaultValue: { summary: 'true' },
+            category: 'Inputs common',
         },
     }, inputmode: {
         name: 'inputmode',
@@ -115,6 +128,7 @@ export const inputBaseGlobalArgTypes = Object.assign(Object.assign({}, formContr
             type: {
                 summary: "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'",
             },
+            category: 'Inputs common',
         },
     }, 
     //Form methods & getters/setters

package/dist/templates/utilities/decorator.d.ts

@@ -0,0 +1,6 @@
+import '../../components/footer-sitemap-item/footer-sitemap-item';
+import '../../components/footer-sitemap/footer-sitemap';
+import '../../components/footer/footer';
+import '../../components/header/header';
+import { Decorator } from '@storybook/web-components-vite';
+export declare const withPageTemplate: Decorator;

package/{cdn/templates → dist/templates/utilities}/decorator.js

@@ -1,8 +1,8 @@
 import { html } from 'lit';
-import '../components/footer-sitemap-item/footer-sitemap-item';
-import '../components/footer-sitemap/footer-sitemap';
-import '../components/footer/footer';
-import '../components/header/header';
+import '../../components/footer-sitemap-item/footer-sitemap-item';
+import '../../components/footer-sitemap/footer-sitemap';
+import '../../components/footer/footer';
+import '../../components/header/header';
 export const withPageTemplate = (story) => html `
   <style>
     /** CSS Reset */

package/dist/templates/utilities/header.d.ts

@@ -0,0 +1,8 @@
+import '../../components/breadcrumb-item/breadcrumb-item';
+import '../../components/breadcrumb/breadcrumb';
+import '../../components/button/button';
+import '../../components/dropdown/dropdown';
+import '../../components/icon/icon';
+import '../../components/menu-item/menu-item';
+import '../../components/menu-navigation/menu-navigation';
+export declare const templatePageHeader: (title: string, withActions?: boolean) => import("lit").TemplateResult<1>;

package/dist/templates/utilities/header.js

@@ -0,0 +1,114 @@
+import { html } from 'lit';
+import '../../components/breadcrumb-item/breadcrumb-item';
+import '../../components/breadcrumb/breadcrumb';
+import '../../components/button/button';
+import '../../components/dropdown/dropdown';
+import '../../components/icon/icon';
+import '../../components/menu-item/menu-item';
+import '../../components/menu-navigation/menu-navigation';
+export const templatePageHeader = (title, withActions = false) => {
+    return html `
+    <style>
+      /** Header */
+      .page-header {
+        display: contents;
+      }
+      .title-and-actions {
+        display: flex;
+        flex-direction: column;
+        gap: var(--dsa-spacing-24);
+      }
+      .title-1 {
+        font: var(--dsa-font-x-large-bold);
+      }
+      .action-bar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+      }
+
+      /** Media queries */
+      @media screen and (min-width: 600px) {
+        .title-and-actions {
+          gap: var(--dsa-spacing-32);
+        }
+        .title-1 {
+          font: var(--dsa-font-2x-large-bold);
+        }
+      }
+    </style>
+    <header class="page-header">
+      <dsa-breadcrumb>
+        <dsa-breadcrumb-item href="#">
+          <dsa-icon slot="prefix" name="home"></dsa-icon>
+          Accueil
+        </dsa-breadcrumb-item>
+        <dsa-breadcrumb-item href="#">${title}</dsa-breadcrumb-item>
+      </dsa-breadcrumb>
+      <div class="title-and-actions">
+        <h1 class="title-1">${title}</h1>
+        ${withActions
+        ? html `
+              <div class="action-bar">
+                <dsa-button variant="secondary" id="printButton"
+                  ><dsa-icon name="print" slot="prefix"></dsa-icon
+                  >Imprimer</dsa-button
+                >
+                <dsa-button variant="secondary" href="mailto:test@test.com"
+                  ><dsa-icon name="email" slot="prefix"></dsa-icon
+                  >Envoyer</dsa-button
+                >
+                <dsa-dropdown>
+                  <dsa-button slot="trigger" variant="secondary" caret
+                    ><dsa-icon name="send" slot="prefix"></dsa-icon
+                    >Partager</dsa-button
+                  >
+                  <dsa-menu-navigation>
+                    <dsa-menu-item
+                      type="link"
+                      target="_blank"
+                      href="https://twitter.com/intent/tweet?url=https://dsa.service-public-autonomie.fr/latest/demarrer/design-system-de-l-autonomie/presentation-A6ygvnwd&text=Documentation%20du%20Design%20System%20de%20l'autonomie"
+                    >
+                      <svg
+                        slot="prefix"
+                        viewBox="0 0 128 128"
+                        aria-hidden="true"
+                      >
+                        <path
+                          d="M75.916 54.2 122.542 0h-11.05L71.008 47.06 38.672 0H1.376l48.898 71.164L1.376 128h11.05L55.18 78.303 89.328 128h37.296L75.913 54.2ZM60.782 71.79l-4.955-7.086-39.42-56.386h16.972L65.19 53.824l4.954 7.086 41.353 59.15h-16.97L60.782 71.793Z"
+                          fill="#000"
+                          style="stroke-width:.104373"
+                        ></path>
+                      </svg>
+                      X / Twitter</dsa-menu-item
+                    >
+                    <dsa-menu-item
+                      type="link"
+                      target="_blank"
+                      href="https://www.linkedin.com/sharing/share-offsite/?url=https://dsa.service-public-autonomie.fr/latest/demarrer/design-system-de-l-autonomie/presentation-A6ygvnwd"
+                    >
+                      <svg
+                        slot="prefix"
+                        viewBox="0 0 128 128"
+                        aria-hidden="true"
+                      >
+                        <path
+                          fill="#0076b2"
+                          d="M116 3H12a8.91 8.91 0 00-9 8.8v104.42a8.91 8.91 0 009 8.78h104a8.93 8.93 0 009-8.81V11.77A8.93 8.93 0 00116 3z"
+                        ></path>
+                        <path
+                          fill="#fff"
+                          d="M21.06 48.73h18.11V107H21.06zm9.06-29a10.5 10.5 0 11-10.5 10.49 10.5 10.5 0 0110.5-10.49M50.53 48.73h17.36v8h.24c2.42-4.58 8.32-9.41 17.13-9.41C103.6 47.28 107 59.35 107 75v32H88.89V78.65c0-6.75-.12-15.44-9.41-15.44s-10.87 7.36-10.87 15V107H50.53z"
+                        ></path>
+                      </svg>
+                      Linkedin</dsa-menu-item
+                    >
+                  </dsa-menu-navigation>
+                </dsa-dropdown>
+              </div>
+            `
+        : ''}
+      </div>
+    </header>
+  `;
+};

package/dist/templates/utilities/template-story-config.d.ts

@@ -0,0 +1,16 @@
+import { ArgTypes } from '@storybook/web-components-vite';
+export declare const templateStoryConfig: {
+    parameters: {
+        layout: string;
+    };
+    globals: {
+        viewport: {
+            value: string;
+        };
+    };
+    decorators: import("@storybook/web-components-vite").Decorator[];
+    args: {
+        story_actions: boolean;
+    };
+    argTypes: ArgTypes;
+};

package/dist/templates/utilities/template-story-config.js

@@ -0,0 +1,20 @@
+import { withPageTemplate } from './decorator';
+export const templateStoryConfig = {
+    parameters: {
+        layout: 'fullscreen',
+    },
+    globals: {
+        viewport: { value: 'reset' },
+    },
+    decorators: [withPageTemplate],
+    args: {
+        story_actions: true,
+    },
+    argTypes: {
+        story_actions: {
+            name: 'actions',
+            description: '(Story) Add actions below main title',
+            control: { type: 'boolean' },
+        },
+    },
+};

package/dist/utilities/storybook.js

@@ -1,10 +1,11 @@
-import "../chunks/chunk.NSAJTBR4.js";
+import "../chunks/chunk.KYZD4HDJ.js";
 import "../chunks/chunk.UVGAHM33.js";
 import "../chunks/chunk.IQCD6SDT.js";
 import "../chunks/chunk.WYUQG5BJ.js";
 import "../chunks/chunk.B4BZKR24.js";
 import "../chunks/chunk.QBV4OLYE.js";
 import "../chunks/chunk.LRTTUCZP.js";
+import "../chunks/chunk.PWL7QCVG.js";
 import "../chunks/chunk.7BLYNLBH.js";
 import "../chunks/chunk.7627FYPL.js";
 import "../chunks/chunk.KPJCYT4S.js";

package/dist/vscode.html-custom-data.json

@@ -118,7 +118,7 @@
         },
         {
           "name": "duration",
-          "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
+          "description": "(deprecated) The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
           "values": []
         }
       ],
@@ -1021,11 +1021,6 @@
           "description": "A custom label to show in the tooltip when a copy error occurs.",
           "values": []
         },
-        {
-          "name": "feedback-duration",
-          "description": "The length of time to show feedback before restoring the default trigger.",
-          "values": []
-        },
         {
           "name": "tooltip-placement",
           "description": "The preferred placement of the tooltip.",
@@ -2132,7 +2127,7 @@
     },
     {
       "name": "dsa-input-phone",
-      "description": "Inputs collect data from the user.\n---\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the control loses focus.\n- **dsa-change** - Emitted when an alteration to the control's value is committed by the user.\n- **dsa-clear** - Emitted when the clear button is activated.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-input** - Emitted when the control receives input.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - The tooltip slot allows additional information to be passed along the label.",
+      "description": "Inputs collect data from the user.\n---\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the control loses focus.\n- **dsa-change** - Emitted when an alteration to the control's value is committed by the user.\n- **dsa-clear** - Emitted when the clear button is activated.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-input** - Emitted when the control receives input.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - The tooltip slot allows additional information to be passed along the label.",
       "attributes": [
         {
           "name": "value",
@@ -2258,7 +2253,8 @@
           "name": "current",
           "description": "Sets the link aria-current attribute and adds specific styles",
           "values": []
-        }
+        },
+        { "name": "expanded", "values": [] }
       ],
       "references": []
     },