@ds-autonomie/web-components 2.4.1 → 2.5.1

package/cdn/internal/components/input-base/input-base.styles.js

@@ -0,0 +1,302 @@
+import { css } from 'lit';
+import componentStyles from '../../../styles/component.styles';
+import formControlStyles from '../../../styles/form-control.styles';
+export default css `
+  ${componentStyles}
+  ${formControlStyles}
+
+  :host {
+    display: block;
+  }
+
+  .input {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    vertical-align: middle;
+    width: 100%;
+    font: var(--dsa-wc-input-text-field-font);
+
+    transition: var(--dsa-wc-transition-fast) color,
+      var(--dsa-wc-transition-fast) border,
+      var(--dsa-wc-transition-fast) box-shadow,
+      var(--dsa-wc-transition-fast) background-color;
+    border-radius: var(--dsa-wc-input-border-radius);
+  }
+
+  .input--focused:not(.input--disabled) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  /* On Layer inputs */
+  .input--on-layer {
+    background-color: var(--dsa-wc-input-on-layer-background-color);
+    border: solid var(--dsa-wc-input-border-width)
+      var(--dsa-wc-input-on-layer-border-color);
+  }
+
+  .input--on-layer:hover:not(.input--disabled):not(.input--readonly) {
+    border-color: var(--dsa-wc-input-on-layer-border-color-hover);
+  }
+
+  .input--on-layer.input--focused:not(.input--disabled):not(.input--readonly)
+    .input__control {
+    color: var(--dsa-wc-input-on-layer-text-field-input-color);
+  }
+
+  .input--on-layer.input--disabled {
+    background-color: var(--dsa-wc-input-on-layer-background-color-disabled);
+    border-color: var(--dsa-wc-input-on-layer-border-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input--on-layer.input--readonly {
+    background-color: var(--dsa-wc-input-on-layer-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-layer-read-only-border-color);
+  }
+  .input--on-layer.input--disabled .input__control {
+    color: var(--dsa-wc-input-on-layer-text-field-input-color-disabled);
+  }
+
+  .input--error.input--on-layer:not(.input--disabled):not(.input--readonly) {
+    background-color: var(--dsa-wc-input-on-layer-background-color-error);
+    border-color: var(--dsa-wc-input-on-layer-border-color-error);
+  }
+  .input--error.input--on-layer:hover:not(.input--disabled):not(
+      .input--readonly
+    ) {
+    border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
+  }
+
+  .input--on-layer .input__control::placeholder {
+    color: var(--dsa-wc-input-on-layer-text-field-placeholder-color);
+    user-select: none;
+  }
+
+  /* On Base inputs */
+  .input--on-base {
+    border: solid var(--dsa-wc-input-border-width)
+      var(--dsa-wc-input-on-base-border-color);
+    background-color: var(--dsa-wc-input-on-base-background-color);
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .input--on-base:hover:not(.input--disabled):not(.input--readonly) {
+    border-color: var(--dsa-wc-input-on-base-border-color-hover);
+  }
+
+  .input--on-base.input--disabled {
+    border-color: var(--dsa-wc-input-on-base-border-color-disabled);
+    background-color: var(--dsa-wc-input-on-base-background-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input--on-base.input--readonly {
+    background-color: var(--dsa-wc-input-on-base-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-base-read-only-border-color);
+  }
+
+  .input--error.input--on-base:not(.input--disabled):not(.input--readonly) {
+    background-color: var(--dsa-wc-input-on-base-background-color-error);
+    border-color: var(--dsa-wc-input-on-base-border-color-error);
+  }
+  .input--error.input--on-base:hover:not(.input--disabled):not(
+      .input--readonly
+    ) {
+    border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
+  }
+
+  .input--on-base .input__control::placeholder {
+    color: var(--dsa-wc-input-on-base-text-field-placeholder-color);
+    user-select: none;
+  }
+
+  /* Input Control */
+  .input__control {
+    display: inline-flex;
+    flex-direction: row;
+    flex: 1 1 auto;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    min-width: 0;
+    height: 100%;
+    border: none;
+    border-radius: inherit;
+    background: none;
+    box-shadow: none;
+    padding: var(--dsa-wc-input-padding);
+    margin: 0;
+    cursor: inherit;
+    -webkit-appearance: none;
+  }
+
+  .input__control::placeholder {
+    opacity: 1;
+  }
+
+  .input__control::-webkit-search-decoration,
+  .input__control::-webkit-search-cancel-button,
+  .input__control::-webkit-search-results-button,
+  .input__control::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
+  .input__control:autofill,
+  .input__control:-webkit-autofill,
+  .input__control:autofill:hover,
+  .input__control:-webkit-autofill:hover,
+  .input__control:autofill:focus,
+  .input__control:-webkit-autofill:focus,
+  .input__control:autofill:active,
+  .input__control:-webkit-autofill:active {
+    box-shadow: 0 0 0 var(--dsa-wc-form-input-height-large)
+      var(--dsa-wc-form-input-autocomplete-background) inset !important;
+    -webkit-text-fill-color: var(--dsa-wc-input-on-base-text-field-input-color);
+    caret-color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .input:hover:not(.input--disabled):not(.input--readonly) .input__control {
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .input__control:focus {
+    outline: none;
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  .input--small {
+    font: var(--dsa-wc-input-text-field-font-small);
+    height: var(--dsa-wc-form-input-height-small);
+  }
+
+  .input__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    padding: var(--dsa-spacing-4);
+  }
+
+  .input > .input__action-button {
+    --padding: var(--dsa-spacing-4);
+  }
+
+  .input > .input__action-button + .input__action-button {
+    margin-right: var(--dsa-wc-input-action-buttons-spacing);
+  }
+
+  .input > .input__action-button:last-of-type,
+  .input > .input__suffix:last-child {
+    margin-right: var(--dsa-wc-input-padding-x);
+  }
+
+  .input > .input__control + .input__action-button,
+  .input > .input__control + .input__suffix {
+    margin-left: auto;
+    z-index: 1;
+  }
+
+  .form-control--has-prefix-icon .input__control {
+    padding-left: calc(
+      1rem + var(--dsa-wc-input-padding-x) + var(--dsa-wc-input-spacing-left)
+    );
+  }
+
+  .input--small .input__control {
+    height: calc(
+      var(--dsa-wc-form-input-height-small) - var(--dsa-wc-input-border-width) *
+        2
+    );
+  }
+
+  .input--medium {
+    height: var(--dsa-wc-form-input-height);
+  }
+
+  .input--medium .input__control {
+    height: calc(
+      var(--dsa-wc-form-input-height) - var(--dsa-wc-input-border-width) * 2
+    );
+  }
+
+  .input--large {
+    font: var(--dsa-wc-input-text-field-font-large);
+    height: var(--dsa-wc-form-input-height-large);
+  }
+
+  .input--large .input__control {
+    height: calc(
+      var(--dsa-wc-form-input-height-large) - var(--dsa-wc-input-border-width) *
+        2
+    );
+  }
+
+  .input__action-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--dsa-wc-input-icon-color);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--dsa-wc-transition-fast) color;
+    cursor: pointer;
+  }
+
+  .input__action-button:hover {
+    color: var(--dsa-wc-input-icon-color-hover);
+    fill: var(--dsa-wc-input-icon-color-hover);
+  }
+
+  /*
+  * Custom styling for Time type
+  */
+
+  input[type='time']::-webkit-calendar-picker-indicator {
+    display: none;
+  }
+
+  .input__prefix,
+  .input__suffix {
+    color: var(--dsa-wc-input-icon-color);
+    pointer-events: none;
+  }
+
+  .input__prefix,
+  .input__prefix::slotted(*) {
+    position: absolute;
+    left: var(--dsa-wc-input-padding-x);
+    z-index: 1;
+  }
+
+  .input--empty .input__clear {
+    visibility: hidden;
+  }
+
+  /* Don't show the browser's password toggle in Edge */
+  ::-ms-reveal {
+    display: none;
+  }
+
+  /* Pagination page number input */
+  :host(.pagination__input) input {
+    padding-inline: var(--dsa-spacing-4);
+    text-align: center;
+  }
+  /* Hide the browser's up and down arrow in input number for the pagination on mobile */
+  :host(.pagination__input) input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  :host(.pagination__input) input[type='number'] {
+    -moz-appearance: textfield;
+  }
+`;

package/cdn/internal/components/input-base/input-base.utils.d.ts

@@ -0,0 +1 @@
+export type DSAInputTypes = 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'amount';

package/cdn/internal/components/input-base/input-base.utils.js

@@ -0,0 +1 @@
+export {};

package/cdn/internal/components/radio-icon/radio-icon.styles.js

@@ -4,12 +4,6 @@ export default css `
     display: contents;
   }
 
-  :host::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-  }
-
   .radio__control--small {
     --toggle-size: var(--dsa-wc-radio-size-small);
     --toggle-inner-size: var(--dsa-wc-radio-inner-size-small);

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

@@ -110,6 +110,11 @@
   --dsa-wc-form-required-content: "*";
   --dsa-wc-form-required-content-offset: -2px;
   --dsa-wc-form-required-content-color: var(--dsa-color-input-label-error);
+  --dsa-wc-fieldset-background: var(--dsa-color-background-base);
+  --dsa-wc-fieldset-border-color: var(--dsa-color-border-default);
+  --dsa-wc-fieldset-legend-color: var(--dsa-color-text-on-base-primary);
+  --dsa-wc-fieldset-title-font: var(--dsa-font-large-bold);
+  --dsa-wc-fieldset-subtitle-font: var(--dsa-font-small-normal);
   --dsa-wc-checkbox-color: var(--dsa-color-checkbox-primary);
   --dsa-wc-checkbox-color-disabled: var(--dsa-color-checkbox-disabled);
   --dsa-wc-checkbox-color-active: var(
@@ -402,6 +407,38 @@
   --dsa-wc-card-box-shadow: var(--dsa-wc-shadow-x-small);
   --dsa-wc-card-link-box-shadow-hover: var(--dsa-wc-shadow-x-large);
   --dsa-wc-card-link-background-active: var(--dsa-color-card-background-actif);
+  --dsa-wc-card-content-body-padding: var(--dsa-spacing-32)
+    var(--dsa-spacing-32) var(--dsa-spacing-32) var(--dsa-spacing-24);
+  --dsa-wc-card-small-content-body-padding: var(--dsa-spacing-16);
+  --dsa-wc-card-content-filled-background-color: var(--dsa-color-surface-layer);
+  --dsa-wc-card-content-large-title-font: var(--dsa-font-x-large-bold);
+  --dsa-wc-card-content-small-title-font: var(--dsa-font-large-bold);
+  --dsa-wc-card-content-subtitle-font: var(--dsa-font-medium-bold);
+  --dsa-wc-card-content-content-font: var(---dsa-font-medium-normal);
+  --dsa-wc-card-content-title-color: var(--dsa-color-text-on-base-primary);
+  --dsa-wc-card-content-subtitle-text-color: var(
+    --dsa-color-text-on-base-secondary
+  );
+  --dsa-wc-card-content-content-color: var(--dsa-color-text-on-base-secondary);
+  --dsa-wc-card-content-chevron-color: var(--dsa-color-text-on-base-primary);
+  --dsa-wc-card-content-link-small-icon-size: 2.25rem;
+  --dsa-wc-card-content-link-large-icon-size: 2.5rem;
+  --dsa-wc-card-content-link-icon-padding: var(--dsa-spacing-8);
+  --dsa-wc-card-content-tags-margin-bottom: 20px;
+  --dsa-wc-card-content-title-icon-size: 3rem;
+  --dsa-wc-card-content-small-title-icon-size: 2rem;
+  --dsa-wc-card-content-title-block-gap: var(--dsa-spacing-8);
+  --dsa-wc-card-content-margin-top: var(--dsa-spacing-12);
+  --dsa-wc-card-content-footer-padding-top: var(--dsa-spacing-32);
+  --dsa-wc-card-nav-color: var(--dsa-color-card-on-background);
+  --dsa-wc-card-nav-icon-color: var(
+    --dsa-color-primitive-colors-identity-purple-500
+  );
+  --dsa-wc-card-nav-subtitle-color: var(--dsa-color-text-on-base-secondary);
+  --dsa-wc-card-nav-background-color: var(--dsa-color-card-background-default);
+  --dsa-wc-card-nav-background-color-hover: var(--dsa-color-background-hover);
+  --dsa-wc-card-nav-border-color: var(--dsa-color-border-default);
+  --dsa-wc-card-nav-border-color-hover: var(--dsa-color-border-hover);
   --dsa-wc-download-card-background-color: var(--dsa-color-background-base);
   --dsa-wc-download-card-left-bar-width: var(--dsa-spacing-4);
   --dsa-wc-download-card-left-bar-color: var(
@@ -1368,6 +1405,61 @@
     --dsa-color-tag-simple-purple-on-light-background
   );
   --dsa-wc-tag-purple-100-base: var(--dsa-color-tag-simple-purple-background-1);
+  --dsa-wc-tag-button-border-width: 1px;
+  --dsa-wc-tag-button-neutral-color: var(
+    --dsa-color-tag-cliquable-default-on-background
+  );
+  --dsa-wc-tag-button-neutral-background: var(
+    --dsa-color-tag-cliquable-default-background
+  );
+  --dsa-wc-tag-button-neutral-border-color: var(
+    --dsa-color-tag-cliquable-default-border
+  );
+  --dsa-wc-tag-button-neutral-hover-color: var(
+    --dsa-color-tag-cliquable-default-hover-on-background
+  );
+  --dsa-wc-tag-button-neutral-hover-background: var(
+    --dsa-color-tag-cliquable-default-hover-background
+  );
+  --dsa-wc-tag-button-neutral-hover-border-color: var(
+    --dsa-color-tag-cliquable-default-hover-border
+  );
+  --dsa-wc-tag-button-neutral-active-color: var(
+    --dsa-color-tag-cliquable-default-pressed-on-background
+  );
+  --dsa-wc-tag-button-neutral-active-background: var(
+    --dsa-color-tag-cliquable-default-pressed-background
+  );
+  --dsa-wc-tag-button-neutral-active-border-color: var(
+    --dsa-color-tag-cliquable-default-pressed-border
+  );
+  --dsa-wc-tag-button-active-color: var(
+    --dsa-color-tag-cliquable-active-on-background
+  );
+  --dsa-wc-tag-button-active-background: var(
+    --dsa-color-tag-cliquable-active-background
+  );
+  --dsa-wc-tag-button-active-border-color: var(
+    --dsa-color-tag-cliquable-active-border
+  );
+  --dsa-wc-tag-button-active-hover-color: var(
+    --dsa-color-tag-cliquable-active-hover-on-background
+  );
+  --dsa-wc-tag-button-active-hover-background: var(
+    --dsa-color-tag-cliquable-active-hover-background
+  );
+  --dsa-wc-tag-button-active-hover-border-color: var(
+    --dsa-color-tag-cliquable-active-hover-border
+  );
+  --dsa-wc-tag-button-active-active-color: var(
+    --dsa-color-tag-cliquable-active-pressed-on-background
+  );
+  --dsa-wc-tag-button-active-active-background: var(
+    --dsa-color-tag-cliquable-active-pressed-background
+  );
+  --dsa-wc-tag-button-active-active-border-color: var(
+    --dsa-color-tag-cliquable-active-pressed-border
+  );
   --dsa-wc-breadcrumb-item-font: var(--dsa-font-small-normal);
   --dsa-wc-breadcrumb-item-color: var(
     --dsa-color-button-on-base-navigation-active
@@ -1930,10 +2022,10 @@
   --dsa-wc-header-main-medium-padding-y: var(--dsa-spacing-16);
   --dsa-wc-header-logo-width-mobile: 84px;
   --dsa-wc-header-logo-width-desktop: 108px;
-  --dsa-wc-header-logo-width-desktop-large: 156px;
+  --dsa-wc-header-logo-width-desktop-large: 172px;
   --dsa-wc-header-logo-height-mobile: 40px;
   --dsa-wc-header-logo-height-desktop: 50px;
-  --dsa-wc-header-logo-height-desktop-large: 72px;
+  --dsa-wc-header-logo-height-desktop-large: 80px;
   --dsa-wc-header-sitename-color: var(
     --dsa-color-primitive-colors-identity-purple-500
   );