@ds-autonomie/web-components 1.6.0 → 1.8.0

package/dist/themes/dsa-wc-theme.styles.js

@@ -100,6 +100,11 @@ export default css`
     --dsa-wc-checkbox-label-color-disabled: var(
       --dsa-color-text-on-base-disabled
     );
+    --dsa-wc-checkbox-border-color-readonly: var(
+      --dsa-color-toggle-item-readonly
+    );
+    --dsa-wc-checkbox-background-color-readonly: var(--dsa-wc-checkbox-color);
+    --dsa-wc-checkbox-icon-color-readonly: var(--dsa-color-toggle-item-default);
     --dsa-wc-checkbox-label-color-error: var(--dsa-color-text-on-base-error);
     --dsa-wc-checkbox-icon-color: var(--dsa-color-background-base);
     --dsa-wc-checkbox-border-width: 1px;
@@ -112,6 +117,8 @@ export default css`
     --dsa-wc-radio-color: var(--dsa-color-toggle-item-default);
     --dsa-wc-radio-color-active: var(--dsa-color-toggle-item-active);
     --dsa-wc-radio-color-disabled: var(--dsa-color-toggle-item-disabled);
+    --dsa-wc-radio-border-color-readonly: var(--dsa-color-toggle-item-readonly);
+    --dsa-wc-radio-color-readonly: var(--dsa-color-toggle-item-default);
     --dsa-wc-radio-color-hover: var(--dsa-color-toggle-item-hover);
     --dsa-wc-radio-label-font: var(--dsa-font-medium-normal);
     --dsa-wc-radio-label-font-small: var(--dsa-font-small-normal);
@@ -198,11 +205,20 @@ export default css`
       --dsa-color-toggle-button-selected-on-read-only
     );
     --dsa-wc-toggle-button-read-only-checked-color: var(
-      --dsa-color-toggle-button-default-on-read-only
+      --dsa-color-toggle-button-selected-on-read-only
     );
     --dsa-wc-toggle-button-read-only-checked-icon-color: var(
       --dsa-color-toggle-button-selected-on-read-only
     );
+    --dsa-wc-toggle-button-error-background-color: var(
+      --dsa-color-toggle-button-default-default
+    );
+    --dsa-wc-toggle-button-error-border-color: var(
+      --dsa-color-toggle-item-error
+    );
+    --dsa-wc-toggle-button-error-color: var(
+      --dsa-color-toggle-button-default-on-default
+    );
     --dsa-wc-toggle-button-icon-spacing: var(--dsa-spacing-8);
     --dsa-wc-toggle-button-icon-padding-x: var(--dsa-spacing-8);
     --dsa-wc-tab-font: var(--dsa-font-small-normal);
@@ -1094,6 +1110,10 @@ export default css`
     --dsa-wc-accordion-padding: 1rem;
     --dsa-wc-accordion-background-color: var(--dsa-color-background-base);
     --dsa-wc-accordion-border-radius: var(--dsa-spacing-4);
+    --dsa-wc-select-padding-x: var(--dsa-spacing-12);
+    --dsa-wc-select-padding-y: var(--dsa-spacing-4);
+    --dsa-wc-select-padding: var(--dsa-wc-select-padding-y)
+      var(--dsa-wc-select-padding-x);
     --dsa-wc-select-input-font: var(--dsa-font-medium-normal);
     --dsa-wc-select-input-font-small: var(--dsa-font-small-normal);
     --dsa-wc-select-input-font-large: var(--dsa-font-large-normal);
@@ -1334,6 +1354,115 @@ export default css`
     --dsa-wc-skip-link-item-color-active: var(
       --dsa-color-button-on-base-navigation-active
     );
+    --dsa-wc-file-upload-label-font-small: var(--dsa-font-small-bold);
+    --dsa-wc-file-upload-label-font-medium: var(--dsa-font-medium-bold);
+    --dsa-wc-file-upload-label-font-large: var(--dsa-font-large-bold);
+    --dsa-wc-file-upload-help-text-font-small: var(--dsa-font-x-small-normal);
+    --dsa-wc-file-upload-help-text-font-medium: var(--dsa-font-small-normal);
+    --dsa-wc-file-upload-help-text-font-large: var(--dsa-font-medium-normal);
+    --dsa-wc-file-upload-error-text-font-small: var(--dsa-font-x-small-normal);
+    --dsa-wc-file-upload-error-text-font-medium: var(--dsa-font-small-normal);
+    --dsa-wc-file-upload-error-text-font-large: var(--dsa-font-medium-normal);
+    --dsa-wc-file-upload-clear-icon-small-size: 0.875rem;
+    --dsa-wc-file-upload-clear-icon-medium-size: 1rem;
+    --dsa-wc-file-upload-clear-icon-large-size: 1.25rem;
+    --dsa-wc-footer-background: var(--dsa-color-background-layer);
+    --dsa-wc-footer-divider-spacing: var(--dsa-spacing-32);
+    --dsa-wc-footer-top-spacing: var(--dsa-spacing-24);
+    --dsa-wc-footer-bottom-spacing: var(--dsa-spacing-32);
+    --dsa-wc-footer-padding-x: var(--dsa-spacing-16);
+    --dsa-wc-footer-padding-y: var(--dsa-spacing-40);
+    --dsa-wc-footer-medium-padding-x: var(--dsa-spacing-24);
+    --dsa-wc-footer-medium-padding-y: var(--dsa-spacing-40);
+    --dsa-wc-footer-x-large-padding-x: 200px;
+    --dsa-wc-footer-x-large-padding-y: var(--dsa-spacing-40);
+    --dsa-wc-footer-content-block-spacing: var(--dsa-spacing-16);
+    --dsa-wc-footer-content-block-max-width: 800px;
+    --dsa-wc-footer-content-block-title-font: var(--dsa-font-medium-bold);
+    --dsa-wc-footer-content-block-title-color: var(
+      --dsa-color-text-on-base-secondary
+    );
+    --dsa-wc-footer-content-block-title-margin: 0px;
+    --dsa-wc-footer-content-block-content-font: var(--dsa-font-small-normal);
+    --dsa-wc-footer-content-block-content-color: var(
+      --dsa-color-text-on-base-secondary
+    );
+    --dsa-wc-footer-content-block-content-margin: 0px;
+    --dsa-wc-footer-inline-divider-spacing: var(--dsa-spacing-8);
+    --dsa-wc-footer-inline-divider-vertical-size: 12px;
+    --dsa-wc-footer-inline-divider-text-font: var(--dsa-font-x-small-normal);
+    --dsa-wc-footer-inline-divider-text-color: var(
+      --dsa-color-text-on-base-secondary
+    );
+    --dsa-wc-footer-inline-divider-text-margin: 0px;
+    --dsa-wc-footer-sitemap-spacing: var(--dsa-spacing-8);
+    --dsa-wc-footer-sitemap-list-spacing: var(--dsa-spacing-16);
+    --dsa-wc-footer-sitemap-list-vertical-spacing: var(--dsa-spacing-4);
+    --dsa-wc-footer-sitemap-label-font: var(--dsa-font-medium-bold);
+    --dsa-wc-footer-sitemap-label-color: var(
+      --dsa-color-text-on-base-secondary
+    );
+    --dsa-wc-footer-sitemap-list-font: var(--dsa-font-small-normal);
+    --dsa-wc-footer-sitemap-label-margin: 0px;
+    --dsa-wc-table-header-cell-padding-y: var(--dsa-spacing-4);
+    --dsa-wc-table-header-cell-padding-x: var(--dsa-spacing-8);
+    --dsa-wc-table-header-cell-background-hover: var(
+      --dsa-color-primitives-neutral-400
+    );
+    --dsa-wc-table-header-cell-background-active: var(
+      --dsa-color-primitives-neutral-500
+    );
+    --dsa-wc-table-header-cell-sort-icon-size: 1rem;
+    --dsa-wc-table-header-cell-sort-button-outline-offset: -3px;
+    --dsa-wc-table-header-row-font: var(--dsa-font-small-bold);
+    --dsa-wc-table-header-row-background: var(--dsa-color-background-layer);
+    --dsa-wc-table-header-row-color: var(--dsa-color-text-on-base-primary);
+    --dsa-wc-table-header-row-height: 2.5rem;
+    --dsa-wc-table-cell-padding-y: var(--dsa-spacing-4);
+    --dsa-wc-table-cell-padding-x: var(--dsa-spacing-8);
+    --dsa-wc-table-cell-border-color: var(--dsa-color-background-divider);
+    --dsa-wc-table-cell-border-size: 1px;
+    --dsa-wc-table-row-background: var(--dsa-color-background-base);
+    --dsa-wc-table-row-font: var(--dsa-font-small-normal);
+    --dsa-wc-table-row-color: var(--dsa-color-text-on-base-primary);
+    --dsa-wc-table-row-hover-background: var(--dsa-color-primitives-purple-100);
+    --dsa-wc-table-row-selected-background: var(
+      --dsa-color-primitives-purple-200
+    );
+    --dsa-wc-table-row-error-background: var(--dsa-color-background-base);
+    --dsa-wc-table-row-hover-error-background: var(
+      --dsa-color-primitives-system-error-200
+    );
+    --dsa-wc-table-row-hover-selected-error-background: var(
+      --dsa-color-primitives-system-error-300
+    );
+    --dsa-wc-table-row-error-border-color: var(
+      --dsa-color-primitives-system-error-500
+    );
+    --dsa-wc-table-row-small-height: 2rem;
+    --dsa-wc-table-row-medium-height: 3.5rem;
+    --dsa-wc-table-row-large-height: 5rem;
+    --dsa-wc-pagination-font: var(--dsa-font-small-normal);
+    --dsa-wc-pagination-height-desktop: 56px;
+    --dsa-wc-pagination-color: var(--dsa-color-text-on-base-primary);
+    --dsa-wc-pagination-button-border: solid 1px
+      var(--dsa-color-background-border);
+    --dsa-wc-pagination-button-size: 2rem;
+    --dsa-wc-pagination-button-padding: 8px;
+    --dsa-wc-pagination-button-background-color: var(
+      --dsa-color-primitives-neutral-100
+    );
+    --dsa-wc-pagination-button-hover-background-color: var(
+      --dsa-color-background-base-hover
+    );
+    --dsa-wc-pagination-button-selected-background-color: hsla(
+      265,
+      69%,
+      94%,
+      1
+    );
+    --dsa-wc-pagination-button-selected-color: hsla(265, 90%, 39%, 1);
+    --dsa-wc-pagination-button-disabled-color: hsla(0, 0%, 40%, 1);
     --dsa-wc-z-index-drawer: 700;
     --dsa-wc-z-index-dialog: 800;
     --dsa-wc-z-index-dropdown: 900;
@@ -1382,6 +1511,19 @@ export default css`
     border-bottom-style: solid;
     transition: border-width 0.1s ease-out;
   }
+  .dsa-link--with-prefix {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom-style: solid;
+    border-bottom-color: transparent;
+    transition: none;
+  }
+  .dsa-link--on-sitemap {
+    transition: none;
+    border-bottom-style: none;
+    color: var(--dsa-color-text-on-layer-primary);
+  }
   .dsa-link--on-contrasted {
     color: var(--dsa-wc-link-on-contrasted-color);
   }
@@ -1398,6 +1540,16 @@ export default css`
         var(--dsa-wc-link-hover-underline-thickness-multiplier)
     );
   }
+  .dsa-link--with-prefix:hover {
+    border-bottom-width: var(--dsa-wc-link-underline-thickness);
+    border-bottom-color: var(--dsa-wc-link-on-base-color);
+    color: var(--dsa-wc-link-hover-on-base-color);
+  }
+  .dsa-link--on-sitemap:hover {
+    border-bottom-style: solid;
+    border-bottom-width: var(--dsa-wc-link-underline-thickness);
+    color: var(--dsa-color-text-on-layer-primary);
+  }
   .dsa-link--on-contrasted:hover {
     color: var(--dsa-wc-link-hover-on-contrasted-color);
   }
@@ -1410,6 +1562,12 @@ export default css`
   .dsa-link:visited {
     color: var(--dsa-wc-link-visited-on-base-color);
   }
+  .dsa-link--with-prefix:visited {
+    color: var(--dsa-wc-link-visited-on-base-color);
+  }
+  .dsa-link--on-sitemap:visited {
+    color: var(--dsa-wc-link-visited-on-base-color);
+  }
   .dsa-link--on-contrasted:visited {
     color: var(--dsa-wc-link-visited-on-contrasted-color);
   }
@@ -1422,6 +1580,12 @@ export default css`
   .dsa-link:active {
     color: var(--dsa-wc-link-active-on-base-color);
   }
+  .dsa-link--with-prefix:active {
+    color: var(--dsa-wc-link-active-on-base-color);
+  }
+  .dsa-link--on-sitemap:active {
+    color: var(--dsa-wc-link-active-on-base-color);
+  }
   .dsa-link--on-contrasted:active {
     color: var(--dsa-wc-link-active-on-contrasted-color);
   }

package/dist/translations/en-gb.js

@@ -1,7 +1,8 @@
 import {
   en_default,
   registerTranslation
-} from "../chunks/chunk.CKDL37GT.js";
+} from "../chunks/chunk.KZIAHLAV.js";
+import "../chunks/chunk.HB7A2UQ7.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/translations/en.js

@@ -1,6 +1,7 @@
 import {
   en_default
-} from "../chunks/chunk.CKDL37GT.js";
+} from "../chunks/chunk.KZIAHLAV.js";
+import "../chunks/chunk.HB7A2UQ7.js";
 import "../chunks/chunk.6M63UXML.js";
 export {
   en_default as default

package/dist/translations/fr.js

@@ -1,6 +1,7 @@
 import {
   fr_default
-} from "../chunks/chunk.CKDL37GT.js";
+} from "../chunks/chunk.KZIAHLAV.js";
+import "../chunks/chunk.HB7A2UQ7.js";
 import "../chunks/chunk.6M63UXML.js";
 export {
   fr_default as default

package/dist/utilities/localize.d.ts

@@ -1,5 +1,6 @@
 import { LocalizeController as DefaultLocalizationController } from '@shoelace-style/localize';
 import type { Translation as DefaultTranslation } from '@shoelace-style/localize';
+import type { TABLE_SORT_DIRECTION } from '../components/table/defs';
 import '../translations/en';
 import '../translations/fr';
 export declare class LocalizeController extends DefaultLocalizationController<Translation> {
@@ -41,6 +42,19 @@ export interface Translation extends DefaultTranslation {
     stepInProgress: string;
     stepError: string;
     errorMessagePanelCodePrefix: string;
+    fileSelect: (multiple: boolean) => string;
+    clearFile: string;
+    uploadFileProgressBar: string;
+    pagination: string;
+    paginationResults: (from: number, to: number, total: number) => string;
+    paginationResultsAriaLabel: (from: number, to: number, total: number) => string;
+    linesPerPage: string;
+    page: string;
+    ofTotal: (total: number) => string;
+    previousPage: string;
+    nextPage: string;
+    nextSortDirection: (direction: TABLE_SORT_DIRECTION) => string;
+    results: string;
     fr_FR: string;
     fr_GP: string;
     fr_GF: string;

package/dist/utilities/localize.js

@@ -1,7 +1,8 @@
 import {
   LocalizeController,
   registerTranslation
-} from "../chunks/chunk.CKDL37GT.js";
+} from "../chunks/chunk.KZIAHLAV.js";
+import "../chunks/chunk.HB7A2UQ7.js";
 import "../chunks/chunk.6M63UXML.js";
 export {
   LocalizeController,