@avenirs-esr/avenirs-dsav 0.1.76 → 0.1.77

package/dist/main.d.ts

@@ -1,7 +1,2 @@
-import '@gouvfr/dsfr/dist/core/core.main.min.css';
-import '@gouvfr/dsfr/dist/component/component.main.min.css';
-import '@gouvfr/dsfr/dist/utility/utility.main.min.css';
-import '@gouvfr/dsfr/dist/scheme/scheme.min.css';
-import '@gouvfr/dsfr/dist/utility/icons/icons.min.css';
 import './main.css';
 import '@/styles/main.scss';

package/dist/stories/foundations/icons.stories.d.ts

@@ -4,3 +4,4 @@ export default meta;
 export declare const AllIcons: StoryFn;
 export declare const MdiIcons: StoryFn;
 export declare const RiIcons: StoryFn;
+export declare const DataUrlIcons: StoryFn;

package/dist/test-utils.cjs.js

@@ -4,10 +4,10 @@
       :style="{ backgroundColor, borderColor, color }"
     >
       {{ label }}
-    </div>`,props:{label:String,small:{type:Boolean,default:!1},ellipsis:{type:Boolean,default:!1},color:String,backgroundColor:String,borderColor:String,iconDataUrl:String}}),c=e.defineComponent({name:"AvTag",template:'<div class="av-tag-stub" />',props:["label","link","tagName","icon","disabled","small","iconOnly","selectable","selected","value"]}),d=e.defineComponent({name:"AvFieldset",props:["id","legend","legendId","class","ariaLive"],template:"<fieldset><slot /></fieldset>"}),r=e.defineComponent({name:"AvIcon",props:["name","color","size","title","animation"],template:'<div class="av-vicon-stub" />'}),p=e.defineComponent({name:"AvAccordion",props:["title","icon"],template:`
+    </div>`,props:{label:String,small:{type:Boolean,default:!1},ellipsis:{type:Boolean,default:!1},color:String,backgroundColor:String,borderColor:String,iconDataUrl:String}}),c=e.defineComponent({name:"AvTag",template:'<div class="av-tag-stub" />',props:["label","link","tagName","icon","disabled","small","iconOnly","selectable","selected","value"]}),d=e.defineComponent({name:"AvFieldset",props:["id","legend","legendId","class","ariaLive"],template:"<fieldset><slot /></fieldset>"}),r=e.defineComponent({name:"AvIcon",props:["name","color","size","title","animation"],template:'<div class="av-vicon-stub" />'}),p=e.defineComponent({name:"AvIconText",template:'<div class="av-icon-text" />',props:["icon","text"]}),u=e.defineComponent({name:"AvAccordion",props:["title","icon"],template:`
     <div class="av-accordion">
       <button
-        class="fr-accordion__btn"
+        class="av-accordion__btn"
         type="button"
         @click="expand"
         :aria-expanded="isActive"
@@ -15,7 +15,7 @@
         <slot />
       </button>
     </div>
-  `,setup(i){const t=e.inject(s.registerAccordionKey);if(!t){const n=e.ref(!1);return{isActive:n,expand:()=>{n.value=!n.value}}}const{isActive:o,expand:a}=t(e.toRef(i,"title"));return{isActive:o,expand:a}}}),u=e.defineComponent({name:"AvButton",props:["label","variant","type","disabled","isLoading","size"],emits:["click"],template:`
+  `,setup(n){const t=e.inject(s.registerAccordionKey);if(!t){const o=e.ref(!1);return{isActive:o,expand:()=>{o.value=!o.value}}}const{isActive:i,expand:a}=t(e.toRef(n,"title"));return{isActive:i,expand:a}}}),v=e.defineComponent({name:"AvButton",props:["label","variant","type","disabled","isLoading","size"],emits:["click"],template:`
     <button
       class="av-button-stub"
       :disabled="disabled"
@@ -23,7 +23,7 @@
     >
       {{ label }}
     </button>
-  `}),v=e.defineComponent({name:"AvCancelConfirmButtons",props:["cancelLabel","cancelIcon","confirmLabel","cancelDisabled","cancelIsLoading","confirmIcon","confirmDisabled","confirmIsLoading"],emits:["cancel","confirm"],template:`
+  `}),m=e.defineComponent({name:"AvCancelConfirmButtons",props:["cancelLabel","cancelIcon","confirmLabel","cancelDisabled","cancelIsLoading","confirmIcon","confirmDisabled","confirmIsLoading"],emits:["cancel","confirm"],template:`
     <div class="av-cancel-confirmation-buttons-stub" >
       <button
         class="cancel"
@@ -38,7 +38,7 @@
         {{ confirmLabel }}
       </button>
     </div>
-  `}),m=e.defineComponent({name:"AvCheckbox",props:{id:{type:String,default:""},name:{type:String,default:"checkbox"},value:{type:[String,Number,Boolean],required:!0},modelValue:{type:Array,required:!0},label:{type:String,default:""}},emits:["update:modelValue"],template:`
+  `}),b=e.defineComponent({name:"AvCheckbox",props:{id:{type:String,default:""},name:{type:String,default:"checkbox"},value:{type:[String,Number,Boolean],required:!0},modelValue:{type:Array,required:!0},label:{type:String,default:""}},emits:["update:modelValue"],template:`
     <div class="av-checkbox-stub">
       <input
         type="checkbox"
@@ -54,16 +54,16 @@
       />
       <label :for="id">{{ label }}</label>
     </div>
-  `}),b=e.defineComponent({name:"AvList",props:["size"],template:`
+  `}),g=e.defineComponent({name:"AvList",props:["size"],template:`
     <div class="av-list-stub">
       <slot />
-    </div>`}),g=e.defineComponent({name:"AvListItem",props:["clickable","hoverBackgroundColor","selected","icon","iconSize","iconColor","colorOnHover"],emits:["click"],template:`
+    </div>`}),S=e.defineComponent({name:"AvListItem",props:["clickable","hoverBackgroundColor","selected","icon","iconSize","iconColor","colorOnHover"],emits:["click"],template:`
     <div
       class="av-list-item-stub"
       @click="$emit('click')"
     >
       <slot />
-    </div>`}),S=e.defineComponent({name:"AvTagPicker",props:["label","options","selected","handleSelectChange"],template:`
+    </div>`}),A=e.defineComponent({name:"AvTagPicker",props:["label","options","selected","handleSelectChange"],template:`
     <div class="av-tag-picker-stub">
       <button
         v-for="option in options"
@@ -74,7 +74,7 @@
         {{ option.label }}
       </button>
     </div>
-  `}),A=e.defineComponent({name:"AvAutocomplete",props:["modelValue","options","loading","inputOptions","getOptionLabel","getOptionKey","multiSelect","serverSideFiltering","enableLoadMore","maxDropdownHeight"],emits:["update:modelValue","search","clear","loadMore"],template:`
+  `}),f=e.defineComponent({name:"AvAutocomplete",props:["modelValue","options","loading","inputOptions","getOptionLabel","getOptionKey","multiSelect","serverSideFiltering","enableLoadMore","maxDropdownHeight"],emits:["update:modelValue","search","clear","loadMore"],template:`
     <div class="av-autocomplete-stub">
       <slot
         name="item"
@@ -85,7 +85,7 @@
         :toggle="() => {}"
       />
     </div>
-  `}),f=e.defineComponent({name:"AvSelect",props:{modelValue:[String,Number],options:Array,placeholder:String,dense:Boolean,required:Boolean,disabled:Boolean,hint:String,errorMessage:String,successMessage:String},emits:["update:modelValue"],template:`
+  `}),C=e.defineComponent({name:"AvSelect",props:{modelValue:[String,Number],options:Array,placeholder:String,dense:Boolean,required:Boolean,disabled:Boolean,hint:String,errorMessage:String,successMessage:String},emits:["update:modelValue"],template:`
     <select 
       class="av-select-stub"
       :value="modelValue"
@@ -110,7 +110,7 @@
       <span v-if="errorMessage">{{ errorMessage }}</span>
       <span v-if="!errorMessage && successMessage">{{ successMessage }}</span>
     </select>
-  `}),C=e.defineComponent({name:"AvToggle",props:["id","name","modelValue","description","activeText","inactiveText","disabled"],emits:["update:modelValue"],template:`
+  `}),k=e.defineComponent({name:"AvToggle",props:["id","name","modelValue","description","activeText","inactiveText","disabled"],emits:["update:modelValue"],template:`
     <div class="av-toggle">
       <input
         type="checkbox"
@@ -128,7 +128,7 @@
       <span class="inactive-text">
         {{ inactiveText }}
       </span>
-    </div>`}),k=e.defineComponent({name:"AvBreadcrumb",template:'<div class="av-breadcrumb-stub" />',props:["links","navigationLabel","showBreadcrumbLabel"]}),h=e.defineComponent({name:"AvSideNavigation",props:{items:Array,selectedItem:String,isSideMenuCollapsed:Boolean,collapsedWidth:String},emits:["update:selectedItem","update:isSideMenuCollapsed"],template:`
+    </div>`}),h=e.defineComponent({name:"AvBreadcrumb",template:'<div class="av-breadcrumb-stub" />',props:["links","navigationLabel","showBreadcrumbLabel"]}),x=e.defineComponent({name:"AvSideNavigation",props:{items:Array,selectedItem:String,isSideMenuCollapsed:Boolean,collapsedWidth:String},emits:["update:selectedItem","update:isSideMenuCollapsed"],template:`
     <div
       class="av-side-navigation-stub"
       @click="$emit('update:isSideMenuCollapsed', !isSideMenuCollapsed)"
@@ -144,12 +144,12 @@
         {{ index + 1 }}. {{ step }}
       </div>
     </div>
-  `}),x=e.defineComponent({name:"AvDrawer",props:["show","position","width"],emits:["escape-pressed"],template:`
+  `}),B=e.defineComponent({name:"AvDrawer",props:["show","position","width"],emits:["escape-pressed"],template:`
     <div class="av-drawer-stub">
       <slot />
       <slot name="footer" />
     </div>
-  `}),B=e.defineComponent({name:"AvDropdown",props:["items","triggerAriaLabel","triggerIcon","triggerLabel","triggerVariant","triggerSize","padding"],emits:["itemSelected"],template:`
+  `}),L=e.defineComponent({name:"AvDropdown",props:["items","triggerAriaLabel","triggerIcon","triggerLabel","triggerVariant","triggerSmall","padding"],emits:["itemSelected"],template:`
     <div class="av-dropdown-stub">
       <button
         v-for="item in items"
@@ -160,4 +160,4 @@
         {{ item.label }}
       </button>
     </div>
-  `});function L(){return{given(i,t){return describe(`🔵 GIVEN ${i}`,t),this},when(i,t){return describe(`🔶 WHEN ${i}`,t),this},and(i,t){return describe(`➕ AND ${i}`,t),this},then(i,t){return it(`🟩 THEN ${i}`,t),this}}}exports.AvAccordionStub=p;exports.AvAutocompleteStub=A;exports.AvBadgeStub=l;exports.AvBreadcrumbStub=k;exports.AvButtonStub=u;exports.AvCancelConfirmButtonsStub=v;exports.AvCheckboxStub=m;exports.AvDrawerStub=x;exports.AvDropdownStub=B;exports.AvFieldsetStub=d;exports.AvIconStub=r;exports.AvListItemStub=g;exports.AvListStub=b;exports.AvSelectStub=f;exports.AvSideNavigationStub=h;exports.AvStepperStub=y;exports.AvTagPickerStub=S;exports.AvTagStub=c;exports.AvToggleStub=C;exports.BddTest=L;
+  `});function T(){return{given(n,t){return describe(`🔵 GIVEN ${n}`,t),this},when(n,t){return describe(`🔶 WHEN ${n}`,t),this},and(n,t){return describe(`➕ AND ${n}`,t),this},then(n,t){return it(`🟩 THEN ${n}`,t),this}}}exports.AvAccordionStub=u;exports.AvAutocompleteStub=f;exports.AvBadgeStub=l;exports.AvBreadcrumbStub=h;exports.AvButtonStub=v;exports.AvCancelConfirmButtonsStub=m;exports.AvCheckboxStub=b;exports.AvDrawerStub=B;exports.AvDropdownStub=L;exports.AvFieldsetStub=d;exports.AvIconStub=r;exports.AvIconTextStub=p;exports.AvListItemStub=S;exports.AvListStub=g;exports.AvSelectStub=C;exports.AvSideNavigationStub=x;exports.AvStepperStub=y;exports.AvTagPickerStub=A;exports.AvTagStub=c;exports.AvToggleStub=k;exports.BddTest=T;

package/dist/test-utils.es.js

@@ -44,17 +44,21 @@ const m = e({
   name: "AvFieldset",
   props: ["id", "legend", "legendId", "class", "ariaLive"],
   template: "<fieldset><slot /></fieldset>"
-}), S = e({
+}), A = e({
   name: "AvIcon",
   props: ["name", "color", "size", "title", "animation"],
   template: '<div class="av-vicon-stub" />'
-}), A = e({
+}), S = e({
+  name: "AvIconText",
+  template: '<div class="av-icon-text" />',
+  props: ["icon", "text"]
+}), f = e({
   name: "AvAccordion",
   props: ["title", "icon"],
   template: `
     <div class="av-accordion">
       <button
-        class="fr-accordion__btn"
+        class="av-accordion__btn"
         type="button"
         @click="expand"
         :aria-expanded="isActive"
@@ -74,7 +78,7 @@ const m = e({
     const { isActive: o, expand: n } = t(c(a, "title"));
     return { isActive: o, expand: n };
   }
-}), f = e({
+}), h = e({
   name: "AvButton",
   props: ["label", "variant", "type", "disabled", "isLoading", "size"],
   emits: ["click"],
@@ -87,7 +91,7 @@ const m = e({
       {{ label }}
     </button>
   `
-}), h = e({
+}), k = e({
   name: "AvCancelConfirmButtons",
   props: [
     "cancelLabel",
@@ -116,7 +120,7 @@ const m = e({
       </button>
     </div>
   `
-}), k = e({
+}), x = e({
   name: "AvCheckbox",
   props: {
     id: { type: String, default: "" },
@@ -143,14 +147,14 @@ const m = e({
       <label :for="id">{{ label }}</label>
     </div>
   `
-}), x = e({
+}), y = e({
   name: "AvList",
   props: ["size"],
   template: `
     <div class="av-list-stub">
       <slot />
     </div>`
-}), y = e({
+}), C = e({
   name: "AvListItem",
   props: ["clickable", "hoverBackgroundColor", "selected", "icon", "iconSize", "iconColor", "colorOnHover"],
   emits: ["click"],
@@ -161,7 +165,7 @@ const m = e({
     >
       <slot />
     </div>`
-}), C = e({
+}), V = e({
   name: "AvTagPicker",
   props: [
     "label",
@@ -181,7 +185,7 @@ const m = e({
       </button>
     </div>
   `
-}), V = e({
+}), B = e({
   name: "AvAutocomplete",
   props: [
     "modelValue",
@@ -208,7 +212,7 @@ const m = e({
       />
     </div>
   `
-}), B = e({
+}), L = e({
   name: "AvSelect",
   props: {
     modelValue: [String, Number],
@@ -248,7 +252,7 @@ const m = e({
       <span v-if="!errorMessage && successMessage">{{ successMessage }}</span>
     </select>
   `
-}), L = e({
+}), I = e({
   name: "AvToggle",
   props: ["id", "name", "modelValue", "description", "activeText", "inactiveText", "disabled"],
   emits: ["update:modelValue"],
@@ -275,7 +279,7 @@ const m = e({
   name: "AvBreadcrumb",
   template: '<div class="av-breadcrumb-stub" />',
   props: ["links", "navigationLabel", "showBreadcrumbLabel"]
-}), I = e({
+}), T = e({
   name: "AvSideNavigation",
   props: {
     items: Array,
@@ -314,7 +318,7 @@ const m = e({
       </div>
     </div>
   `
-}), T = e({
+}), w = e({
   name: "AvDrawer",
   props: ["show", "position", "width"],
   emits: ["escape-pressed"],
@@ -324,9 +328,9 @@ const m = e({
       <slot name="footer" />
     </div>
   `
-}), w = e({
+}), N = e({
   name: "AvDropdown",
-  props: ["items", "triggerAriaLabel", "triggerIcon", "triggerLabel", "triggerVariant", "triggerSize", "padding"],
+  props: ["items", "triggerAriaLabel", "triggerIcon", "triggerLabel", "triggerVariant", "triggerSmall", "padding"],
   emits: ["itemSelected"],
   template: `
     <div class="av-dropdown-stub">
@@ -341,7 +345,7 @@ const m = e({
     </div>
   `
 });
-function N() {
+function D() {
   return {
     given(a, t) {
       return describe(`🔵 GIVEN ${a}`, t), this;
@@ -358,24 +362,25 @@ function N() {
   };
 }
 export {
-  A as AvAccordionStub,
-  V as AvAutocompleteStub,
+  f as AvAccordionStub,
+  B as AvAutocompleteStub,
   m as AvBadgeStub,
   $ as AvBreadcrumbStub,
-  f as AvButtonStub,
-  h as AvCancelConfirmButtonsStub,
-  k as AvCheckboxStub,
-  T as AvDrawerStub,
-  w as AvDropdownStub,
+  h as AvButtonStub,
+  k as AvCancelConfirmButtonsStub,
+  x as AvCheckboxStub,
+  w as AvDrawerStub,
+  N as AvDropdownStub,
   g as AvFieldsetStub,
-  S as AvIconStub,
-  y as AvListItemStub,
-  x as AvListStub,
-  B as AvSelectStub,
-  I as AvSideNavigationStub,
+  A as AvIconStub,
+  S as AvIconTextStub,
+  C as AvListItemStub,
+  y as AvListStub,
+  L as AvSelectStub,
+  T as AvSideNavigationStub,
   M as AvStepperStub,
-  C as AvTagPickerStub,
+  V as AvTagPickerStub,
   b as AvTagStub,
-  L as AvToggleStub,
-  N as BddTest
+  I as AvToggleStub,
+  D as BddTest
 };

package/dist/tests/index.d.ts

@@ -2,6 +2,7 @@ import { AvBadgeStub } from '@/components/badges/AvBadge/AvBadge.stub';
 import { AvTagStub } from '@/components/badges/AvTag/AvTag.stub';
 import { AvFieldsetStub } from '@/components/base/AvFieldset/AvFieldset.stub';
 import { AvIconStub } from '@/components/base/AvIcon/AvIcon.stub';
+import { AvIconTextStub } from '@/components/base/AvIconText/AvIconText.stub';
 import { AvAccordionStub } from '@/components/interaction/accordions/AvAccordion/AvAccordion.stub';
 import { AvButtonStub } from '@/components/interaction/buttons/AvButton/AvButton.stub';
 import { AvCancelConfirmButtonsStub } from '@/components/interaction/buttons/AvCancelConfirmButtons/AvCancelConfirmButtons.stub';
@@ -18,4 +19,4 @@ import { AvStepperStub } from '@/components/navigation/AvStepper/AvStepper.stub'
 import { AvDrawerStub } from '@/components/overlay/drawers/AvDrawer/AvDrawer.stub';
 import { AvDropdownStub } from '@/components/overlay/dropdowns/AvDropdown/AvDropdown.stub';
 import { BddTest } from '@/tests/utils';
-export { AvAccordionStub, AvAutocompleteStub, AvBadgeStub, AvBreadcrumbStub, AvButtonStub, AvCancelConfirmButtonsStub, AvCheckboxStub, AvDrawerStub, AvDropdownStub, AvFieldsetStub, AvIconStub, AvListItemStub, AvListStub, AvSelectStub, AvSideNavigationStub, AvStepperStub, AvTagPickerStub, AvTagStub, AvToggleStub, BddTest, };
+export { AvAccordionStub, AvAutocompleteStub, AvBadgeStub, AvBreadcrumbStub, AvButtonStub, AvCancelConfirmButtonsStub, AvCheckboxStub, AvDrawerStub, AvDropdownStub, AvFieldsetStub, AvIconStub, AvIconTextStub, AvListItemStub, AvListStub, AvSelectStub, AvSideNavigationStub, AvStepperStub, AvTagPickerStub, AvTagStub, AvToggleStub, BddTest, };

package/dist/tokens/icons.d.ts

@@ -27,6 +27,7 @@ export declare const MDI_ICONS: {
     CHEVRON_DOUBLE_RIGHT: string;
     CIRCLE: string;
     CLOSE_CIRCLE_OUTLINE: string;
+    CLOSE_OCTAGON: string;
     CONTENT_SAVE_OUTLINE: string;
     DIAMOND_STONE: string;
     DOTS_VERTICAL: string;
@@ -41,14 +42,18 @@ export declare const MDI_ICONS: {
     FILE_TREE_OUTLINE: string;
     FLAG_VARIANT: string;
     FORMAT_LIST_BULLETED: string;
+    HAMBURGER_MENU: string;
     HOME_VARIANT_OUTLINE: string;
     HOURGLASS: string;
     IMAGE_FILTER_CENTER_FOCUS_WEAK: string;
     IMAGE_OUTLINE: string;
+    INFORMATION_BOX: string;
+    INFORMATION_BOX_OUTLINE: string;
     INFORMATION_OUTLINE: string;
     LINK: string;
     LOADING_OUTLINE: string;
     LOGOUT: string;
+    MAGNIFY: string;
     NAVIGATE_BEFORE: string;
     NAVIGATE_NEXT: string;
     NOTEBOOK_CHECK: string;
@@ -65,13 +70,17 @@ export declare const MDI_ICONS: {
     STAR_CHECK_OUTLINE: string;
     STAR_SHOOTING_OUTLINE: string;
     STARS: string;
+    SUCCESS_CIRCLE_OUTLINE: string;
     SWAP_HORIZONTAL: string;
     SWAP_VERTICAL_VARIANT: string;
     TARGET_ARROW: string;
     TEST_TUBE_EMPTY: string;
+    TRANSLATE: string;
     TRASH_CAN_OUTLINE: string;
     TRAY_UPLOAD: string;
     VECTOR_POLYGON_VARIANT: string;
+    WARNING: string;
+    WARNING_CIRCLE: string;
     WARNING_OUTLINE: string;
     WEIGHTS: string;
 };
@@ -100,10 +109,13 @@ export declare const ICONS_DATA_URL: {
     MDI_CALENDAR_CLOCK_OUTLINE: string;
     MDI_CALENDAR_RANGE_OUTLINE: string;
     MDI_CHECK_CIRCLE: string;
+    MDI_CHECK_CIRCLE_OUTLINE: string;
     MDI_CLOSE_CIRCLE_OUTLINE: string;
     MDI_DOTS_HORIZONTAL_CIRCLE_OUTLINE: string;
     MDI_MESSAGE_BADGE: string;
     MDI_HOURGLASS: string;
+    MDI_KEYBOARD_ARROW_DOWN: string;
+    MDI_KEYBOARD_ARROW_RIGHT: string;
     MDI_PENCIL_OUTLINE: string;
     MDI_STARS: string;
     MDI_TEXT_BOX_CHECK_OUTLINE: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@avenirs-esr/avenirs-dsav",
   "type": "module",
-  "version": "0.1.76",
+  "version": "0.1.77",
   "repository": {
     "type": "git",
     "url": "https://github.com/avenirs-esr/avenirs-dsav"
@@ -84,7 +84,6 @@
     }
   },
   "dependencies": {
-    "@gouvfr/dsfr": "^1.14.0",
     "@iconify/vue": "^4.3.0",
     "@vueuse/core": "^13.9.0",
     "date-fns": "^4.1.0",

package/src/styles/components/_buttons.scss

@@ -0,0 +1,9 @@
+// === Button groups ===
+.av-btns-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  margin-left: calc(-1 * var(--spacing-xs));
+  margin-right: calc(-1 * var(--spacing-xs));
+  padding: var(--spacing-xxs) var(--spacing-sm);
+}

package/src/styles/components/_collapse.scss

@@ -0,0 +1,37 @@
+@use '../core/namespace' as *;
+
+@include ns("collapse") {
+  --collapse: -99999px;
+  --collapser: "";
+  --collapse-max-height: none;
+
+  background-color: var(--other-background-base);
+  max-height: var(--collapse-max-height);
+  overflow: hidden;
+  transition: visibility 0.3s;
+
+  &--expanded {
+    overflow-x: hidden;
+  }
+
+  &:before {
+    content: "";
+    content: var(--collapser);
+    display: block;
+    margin-top: 0;
+    transition: margin-top 0.3s;
+  }
+
+  &:not(.#{$prefix}collapse--expanded):not(.#{$prefix}collapsing) {
+    --collapse-max-height: 0;
+  }
+
+  &:not(.#{$prefix}collapse--expanded) {
+    visibility: hidden;
+  }
+
+  &:not(.#{$prefix}collapse--expanded):before {
+    margin-top: -99999px;
+    margin-top: var(--collapse);
+  }
+}

package/src/styles/components/_footer.scss

@@ -0,0 +1,15 @@
+@use '../core/namespace' as *;
+@use '../settings/breakpoints' as *;
+
+@include ns("footer") {
+  margin-top: var(--spacing-4xl);
+  padding-top: var(--spacing-none);
+  width: 100%;
+  background-color: var(--other-background-base);
+
+  @include min-width(sm) {
+    &__content-list>li {
+      margin-right:1.5rem
+    }
+  }
+}

package/src/styles/components/_form.scss

@@ -0,0 +1,50 @@
+@use '../core/namespace' as *;
+@use '../core/typography' as *;
+
+// === Form elements reset ===
+input,
+select,
+textarea {
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale;
+  -webkit-text-size-adjust:100%;
+  border:0;
+  border-radius:0;
+  font-family:Luciole, arial, sans-serif;
+  text-rendering:optimizeLegibility;
+}
+
+input[type=search]{
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  appearance:none;
+}
+
+input[type=checkbox],
+input[type=radio],
+input[type=range] {
+  -webkit-appearance:auto;
+  -moz-appearance:auto;
+  appearance:auto;
+}
+
+// === Label ===
+@include ns("label") {
+  @extend .b2-regular;
+  display: block;
+  padding-bottom: var(--spacing-xxs);
+
+  &::before {
+    display: none;
+  }
+}
+
+// === Hint text ===
+@include ns("hint-text") {
+  @extend .caption-regular;
+  display: block;
+
+  +.#{$prefix}hint-text {
+    padding-top: var(--spacing-xxs);
+  }
+}