@avenirs-esr/avenirs-dsav 0.1.130 → 0.1.132

package/dist/components/interaction/inputs/AvPeriodInput/AvPeriodInput.stub.d.ts

@@ -17,6 +17,8 @@ export declare const AvPeriodInputStub: import("vue").DefineComponent<import("vu
     startDateDisabled: BooleanConstructor;
     type: StringConstructor;
     labelVisible: BooleanConstructor;
+    startErrorMessage: StringConstructor;
+    endErrorMessage: StringConstructor;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:startModelValue" | "update:endModelValue")[], "change" | "update:startModelValue" | "update:endModelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: StringConstructor;
     label: StringConstructor;
@@ -36,6 +38,8 @@ export declare const AvPeriodInputStub: import("vue").DefineComponent<import("vu
     startDateDisabled: BooleanConstructor;
     type: StringConstructor;
     labelVisible: BooleanConstructor;
+    startErrorMessage: StringConstructor;
+    endErrorMessage: StringConstructor;
 }>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:startModelValue"?: ((...args: any[]) => any) | undefined;

package/dist/test-utils.cjs.js

@@ -67,7 +67,7 @@
     <fieldset class="av-checkboxes-group-stub">
       <slot />
     </fieldset>
-  `}),C=e.defineComponent({name:"AvInput",props:{modelValue:String,label:String,labelClass:String,placeholder:String,isValid:Boolean,isTextarea:Boolean,labelVisible:Boolean,disabled:Boolean,required:Boolean,maxlength:Number,minlength:Number,errorMessage:String,validMessage:String,prefixIcon:String,id:String,descriptionId:String,hint:String,type:String,minDate:String,maxDate:String,width:String,noRadius:Boolean,modelModifiers:Object,textareaMinHeight:String,formatDateStr:String},emits:["update:modelValue"],template:`<input @input="$emit('update:modelValue', $event.target.value)" data-testid="av-input-stub" :value="modelValue" :placeholder="placeholder" :disabled="disabled" :required="required" :maxlength="maxlength" /><slot name="maxLengthCaption" :current-value="modelValue" />`}),h=e.defineComponent({name:"AvPeriodInput",props:{id:String,label:String,labelClass:String,startModelValue:String,endModelValue:String,startLabel:String,endLabel:String,width:String,startMinDate:Date,startMaxDate:Date,endMinDate:Date,endMaxDate:Date,stacked:Boolean,separatorSpacing:String,endDateDisabled:Boolean,startDateDisabled:Boolean,type:String,labelVisible:Boolean},emits:["update:startModelValue","update:endModelValue","change"],template:'<div class="av-period-input-stub" data-testid="av-period-input-stub" />'}),y=e.defineComponent({name:"AvList",props:["size"],template:`
+  `}),C=e.defineComponent({name:"AvInput",props:{modelValue:String,label:String,labelClass:String,placeholder:String,isValid:Boolean,isTextarea:Boolean,labelVisible:Boolean,disabled:Boolean,required:Boolean,maxlength:Number,minlength:Number,errorMessage:String,validMessage:String,prefixIcon:String,id:String,descriptionId:String,hint:String,type:String,minDate:String,maxDate:String,width:String,noRadius:Boolean,modelModifiers:Object,textareaMinHeight:String,formatDateStr:String},emits:["update:modelValue"],template:`<input @input="$emit('update:modelValue', $event.target.value)" data-testid="av-input-stub" :value="modelValue" :placeholder="placeholder" :disabled="disabled" :required="required" :maxlength="maxlength" /><slot name="maxLengthCaption" :current-value="modelValue" />`}),h=e.defineComponent({name:"AvPeriodInput",props:{id:String,label:String,labelClass:String,startModelValue:String,endModelValue:String,startLabel:String,endLabel:String,width:String,startMinDate:Date,startMaxDate:Date,endMinDate:Date,endMaxDate:Date,stacked:Boolean,separatorSpacing:String,endDateDisabled:Boolean,startDateDisabled:Boolean,type:String,labelVisible:Boolean,startErrorMessage:String,endErrorMessage:String},emits:["update:startModelValue","update:endModelValue","change"],template:'<div class="av-period-input-stub" data-testid="av-period-input-stub" />'}),y=e.defineComponent({name:"AvList",props:["size"],template:`
     <div class="av-list-stub">
       <slot />
     </div>`}),k=e.defineComponent({name:"AvListItem",props:["hoverBackgroundColor","selected","icon","iconSize","iconColor","colorOnHover"],emits:["click"],template:`
@@ -123,7 +123,7 @@
       <span v-if="errorMessage">{{ errorMessage }}</span>
       <span v-if="!errorMessage && successMessage">{{ successMessage }}</span>
     </select>
-  `}),T=e.defineComponent({name:"AvTab",props:{title:{type:String,required:!0},icon:{type:String,required:!1}},template:'<div class="av-tab"><slot /></div>'}),I=e.defineComponent({name:"AvTabs",props:{modelValue:{type:Number,default:0},ariaLabel:String,compact:Boolean},emits:["update:modelValue"],setup(a,{slots:t}){const o=e.computed(()=>{var n;return((n=t.default)==null?void 0:n.call(t))??[]}),i=e.computed(()=>a.modelValue??0);return()=>e.h("div",{class:"av-tabs"},o.value[i.value]??null)}}),M=e.defineComponent({name:"AvToggle",props:["id","name","modelValue","description","activeText","inactiveText","disabled"],emits:["update:modelValue"],template:`
+  `}),M=e.defineComponent({name:"AvTab",props:{title:{type:String,required:!0},icon:{type:String,required:!1}},template:'<div class="av-tab"><slot /></div>'}),T=e.defineComponent({name:"AvTabs",props:{modelValue:{type:Number,default:0},ariaLabel:String,compact:Boolean},emits:["update:modelValue"],setup(a,{slots:t}){const o=e.computed(()=>{var n;return((n=t.default)==null?void 0:n.call(t))??[]}),i=e.computed(()=>a.modelValue??0);return()=>e.h("div",{class:"av-tabs"},o.value[i.value]??null)}}),I=e.defineComponent({name:"AvToggle",props:["id","name","modelValue","description","activeText","inactiveText","disabled"],emits:["update:modelValue"],template:`
     <div class="av-toggle">
       <input
         type="checkbox"
@@ -179,4 +179,4 @@
       <slot />
       <slot name="footer"></slot>
     </div>
-  `});function O(){return{given(a,t){return describe(`🔵 GIVEN ${a}`,t),this},when(a,t){return describe(`🔶 WHEN ${a}`,t),this},and(a,t){return describe(`➕ AND ${a}`,t),this},then(a,t){return it(`🟩 THEN ${a}`,t),this}}}exports.AvAccordionStub=b;exports.AvAutocompleteStub=B;exports.AvBadgeStub=d;exports.AvBreadcrumbStub=L;exports.AvButtonStub=g;exports.AvCancelConfirmButtonsStub=S;exports.AvCardStub=v;exports.AvCheckboxStub=f;exports.AvCheckboxesGroupStub=A;exports.AvDrawerStub=$;exports.AvDropdownStub=q;exports.AvFieldsetStub=u;exports.AvIconStub=p;exports.AvIconTextStub=m;exports.AvInputStub=C;exports.AvListItemStub=k;exports.AvListStub=y;exports.AvModalStub=N;exports.AvPeriodInputStub=h;exports.AvSelectStub=V;exports.AvSideNavigationStub=D;exports.AvStepperStub=w;exports.AvTabStub=T;exports.AvTabsStub=I;exports.AvTagPickerStub=x;exports.AvTagStub=c;exports.AvToggleStub=M;exports.BddTest=O;
+  `});function O(){return{given(a,t){return describe(`🔵 GIVEN ${a}`,t),this},when(a,t){return describe(`🔶 WHEN ${a}`,t),this},and(a,t){return describe(`➕ AND ${a}`,t),this},then(a,t){return it(`🟩 THEN ${a}`,t),this}}}exports.AvAccordionStub=b;exports.AvAutocompleteStub=B;exports.AvBadgeStub=d;exports.AvBreadcrumbStub=L;exports.AvButtonStub=g;exports.AvCancelConfirmButtonsStub=S;exports.AvCardStub=v;exports.AvCheckboxStub=f;exports.AvCheckboxesGroupStub=A;exports.AvDrawerStub=$;exports.AvDropdownStub=q;exports.AvFieldsetStub=u;exports.AvIconStub=p;exports.AvIconTextStub=m;exports.AvInputStub=C;exports.AvListItemStub=k;exports.AvListStub=y;exports.AvModalStub=N;exports.AvPeriodInputStub=h;exports.AvSelectStub=V;exports.AvSideNavigationStub=D;exports.AvStepperStub=w;exports.AvTabStub=M;exports.AvTabsStub=T;exports.AvTagPickerStub=x;exports.AvTagStub=c;exports.AvToggleStub=I;exports.BddTest=O;

package/dist/test-utils.es.js

@@ -126,7 +126,7 @@ const f = e({
       {{ label }}
     </button>
   `
-}), C = e({
+}), M = e({
   name: "AvCancelConfirmButtons",
   props: [
     "cancelLabel",
@@ -155,7 +155,7 @@ const f = e({
       </button>
     </div>
   `
-}), M = e({
+}), C = e({
   name: "AvCheckbox",
   props: {
     id: { type: String, default: "" },
@@ -242,7 +242,9 @@ const f = e({
     endDateDisabled: Boolean,
     startDateDisabled: Boolean,
     type: String,
-    labelVisible: Boolean
+    labelVisible: Boolean,
+    startErrorMessage: String,
+    endErrorMessage: String
   },
   emits: ["update:startModelValue", "update:endModelValue", "change"],
   template: '<div class="av-period-input-stub" data-testid="av-period-input-stub" />'
@@ -384,7 +386,7 @@ const f = e({
     }), i = s(() => a.modelValue ?? 0);
     return () => u("div", { class: "av-tabs" }, l.value[i.value] ?? null);
   }
-}), H = e({
+}), E = e({
   name: "AvToggle",
   props: ["id", "name", "modelValue", "description", "activeText", "inactiveText", "disabled"],
   emits: ["update:modelValue"],
@@ -407,11 +409,11 @@ const f = e({
         {{ inactiveText }}
       </span>
     </div>`
-}), K = e({
+}), H = e({
   name: "AvBreadcrumb",
   template: '<div class="av-breadcrumb-stub" />',
   props: ["links", "navigationLabel", "showBreadcrumbLabel"]
-}), P = e({
+}), K = e({
   name: "AvSideNavigation",
   props: {
     items: Array,
@@ -426,7 +428,7 @@ const f = e({
       @click="$emit('update:isSideMenuCollapsed', !isSideMenuCollapsed)"
     />
   `
-}), E = e({
+}), P = e({
   name: "AvStepper",
   props: {
     steps: {
@@ -508,11 +510,11 @@ export {
   B as AvAccordionStub,
   N as AvAutocompleteStub,
   f as AvBadgeStub,
-  K as AvBreadcrumbStub,
+  H as AvBreadcrumbStub,
   V as AvButtonStub,
-  C as AvCancelConfirmButtonsStub,
+  M as AvCancelConfirmButtonsStub,
   k as AvCardStub,
-  M as AvCheckboxStub,
+  C as AvCheckboxStub,
   I as AvCheckboxesGroupStub,
   F as AvDrawerStub,
   j as AvDropdownStub,
@@ -525,12 +527,12 @@ export {
   z as AvModalStub,
   D as AvPeriodInputStub,
   q as AvSelectStub,
-  P as AvSideNavigationStub,
-  E as AvStepperStub,
+  K as AvSideNavigationStub,
+  P as AvStepperStub,
   O as AvTabStub,
   R as AvTabsStub,
   $ as AvTagPickerStub,
   A as AvTagStub,
-  H as AvToggleStub,
+  E as AvToggleStub,
   G as BddTest
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@avenirs-esr/avenirs-dsav",
   "type": "module",
-  "version": "0.1.130",
+  "version": "0.1.132",
   "repository": {
     "type": "git",
     "url": "https://github.com/avenirs-esr/avenirs-dsav"

package/src/styles/core/_palette.scss

@@ -32,9 +32,9 @@
   --light-foreground-critical: #7040F1;
   --light-foreground-neutral: #666769;
   --base: #14171A;
-  --title: #14171AEB;
-  --text1: #14171ACC;
-  --text2: #14171AA3;
+  --title: #161616;
+  --text1: #3A3A3A;
+  --text2: #656565;
   --icon: #14171A7A;
   --icon-filter: invert(65%) sepia(6%) saturate(100%) hue-rotate(180deg) brightness(75%) contrast(85%);
   --divider: #14171A5C;

package/src/styles/core/_radius.scss

@@ -1,11 +1,19 @@
+@use "sass:map";
+
+$radius: (
+  none: 0,        /* 0px */
+  xxs: 0.0625rem, /* 1px */
+  xs: 0.125rem,   /* 2px */
+  sm: 0.25rem,    /* 4px */
+  md: 0.5rem,     /* 8px */
+  lg: 0.75rem,    /* 12px */
+  xl: 1rem,       /* 16px */
+  hg: 2rem,       /* 32px */
+  full: 62.5rem,  /* 1000px */
+) !default;
+
 :root {
-  --radius-none: 0;
-  --radius-xxs: 0.0625rem;  /* 1px */
-  --radius-xs: 0.125rem;    /* 2px */
-  --radius-sm: 0.25rem;     /* 4px */
-  --radius-md: 0.5rem;      /* 8px */
-  --radius-lg: 0.75rem;     /* 12px */
-  --radius-xl: 1rem;        /* 16px */
-  --radius-hg: 2rem;        /* 32px */
-  --radius-full: 62.5rem;   /* 1000px */
+  @each $key, $value in $radius {
+    --radius-#{$key}: #{$value};
+  }
 }

package/src/styles/main.scss

@@ -28,6 +28,8 @@
 @use './utilities/helpers' as *;
 @use './utilities/spacing' as *;
 @use './utilities/layout' as *;
+@use './utilities/palette' as *;
+@use './utilities/border' as *;
 
 // === Global ===
 :root {

package/src/styles/utilities/_border.md

@@ -0,0 +1,70 @@
+---
+layout: page
+lastUpdated: true
+---
+
+# Border
+
+## ✨ Introduction
+
+This `border` utility generates border width, border style and border radius classes for all defined sizes.
+
+## 🏷️ Class patterns
+
+| Class pattern | Description | Responsive variants |
+|---------------|-------------|---------------------|
+| `.av-border-width-{widthSize}` | Applies `border-width` with the specified size | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-border-style-{style}` | Applies `border-style` with the specified style | `solid`, `dashed`, `dotted`, `none` |
+| `.av-radius-{radiusSize}` | Applies `border-radius` with the specified size | `--sm`, `--md`, `--lg`, `--xl` |
+
+📝 Notes:
+- `{widthSize}` corresponds to the border width scale defined in this file: `none` (`0`), `sm` (`0.0625rem`), `md` (`0.125rem`), `lg` (`0.25rem`).
+- `{radiusSize}` corresponds to the radius scale defined in the core: `none`, `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `hg`, `full`.
+
+## 🎨 Some CSS results
+
+### Border width classes
+
+```css
+.av-border-width-sm {
+  border-width: 0.0625rem !important;
+}
+
+.av-border-width-md {
+  border-width: 0.125rem !important;
+}
+```
+
+### Border style classes
+
+```css
+.av-border-style-solid {
+  border-style: solid !important;
+}
+
+.av-border-style-dashed {
+  border-style: dashed !important;
+}
+```
+
+### Border radius classes
+
+```css
+.av-radius-sm {
+  border-radius: var(--radius-sm) !important;
+}
+
+.av-radius-md {
+  border-radius: var(--radius-md) !important;
+}
+```
+
+## 💡 Examples of use
+
+```html
+<div class="av-border-width-sm av-border-style-solid av-radius-sm">
+  <!-- border-width-sm: border width sm (0.0625rem) on all screens -->
+  <!-- border-style-solid: solid border style on all screens -->
+  <!-- radius-sm: border radius sm (var(--radius-sm)) on all screens -->
+</div>
+```

package/src/styles/utilities/_border.scss

@@ -0,0 +1,45 @@
+@use '../core/radius' as r;
+@use '../mixins/responsive-utility' as *;
+@use "sass:map";
+
+// === Border widths ===
+$border-widths: (
+  none: 0,        /* 0px */
+  sm: 0.0625rem, /* 1px */
+  md: 0.125rem,   /* 2px */
+  lg: 0.25rem,    /* 4px */
+);
+
+// === Border styles ===
+$border-styles: (
+  solid,
+  dashed,
+  dotted,
+  none,
+);
+
+// === BASE CLASSES ===
+
+// === Border width classes ===
+// Ex : .av-border-sm / .av-border-lg
+@each $size, $value in $border-widths {
+  @include utility-base("border-width-#{$size}", (
+    border-width: #{$value} !important
+  ));
+}
+
+// === Border style classes ===
+// Ex : .av-border-solid / .av-border-dashed
+@each $style in $border-styles {
+  @include utility-base("border-style-#{$style}", (
+    border-style: #{$style} !important
+  ));
+}
+
+// === Border radius classes ===
+// Ex : .av-radius-sm / .av-radius-lg
+@each $size, $value in r.$radius {
+  @include utility-base("radius-#{$size}", (
+    border-radius: var(--radius-#{$size}) !important
+  ));
+}

package/src/styles/utilities/_helpers.scss

@@ -113,4 +113,12 @@ ol>li{
 
 li::marker{
   content: counter(li-counter, ".") ". ";
+}
+
+// === List reset class ===
+// Ex: .av-list-reset
+@include ns("list-reset") {
+  list-style: none;
+  padding: var(--spacing-none);
+  margin: var(--spacing-none);
 }

package/src/styles/utilities/_palette.scss

@@ -0,0 +1,14 @@
+@use '../core/namespace' as *;
+
+// === Usual text color classes ===
+@include ns("text-text1") {
+  color: var(--text1);
+}
+
+@include ns("text-text2") {
+  color: var(--text2);
+}
+
+@include ns("text-title") {
+  color: var(--title);
+}