@spw-ds/spw-stencil-library 1.3.4 → 1.4.0

package/dist/types/components/spw-accordion/spw-accordion.d.ts

@@ -1,5 +1,5 @@
 export declare class SpwAccordion {
-    el: HTMLElement;
+    el: HTMLSpwAccordionElement;
     /** Couleur de fond appliquée à tous les accordion-item enfants */
     background?: string;
     componentDidLoad(): void;

package/dist/types/components/spw-breadcrumb/spw-breadcrumb.d.ts

@@ -1,6 +1,6 @@
 export declare class SpwBreadcrumb {
     /** Permet de limiter le breadcrumb à x éléments visibles */
-    maxItems?: number;
+    private maxItems?;
     /** Permet de sélectionner la variante de breadcrumb */
     variant: 'multiline' | 'one-line' | 'default';
     /** Permet de choisir la surface d'arrière-plan du breadcrumb */

package/dist/types/components/spw-card/spw-card-subtag-item/spw-card-subtag-item.d.ts

@@ -1,7 +1,7 @@
 export declare class SpwCardSubtagItem {
     /** Lien qui mène vers la catégorie du sous-tag */
     link?: string;
-    handleClick(): void;
+    private handleClick;
     private get elementClass();
     render(): any;
 }

package/dist/types/components/spw-dropdown/spw-dropdown-item/spw-dropdown-item.d.ts

@@ -1,5 +1,5 @@
 export declare class SpwDropdownItem {
-    el: HTMLElement;
+    el: HTMLSpwDropdownItemElement;
     /** Lien href pour l'item */
     href?: string;
     /** Si true, l'item est désactivé */

package/dist/types/components/spw-dropdown/spw-dropdown.d.ts

@@ -8,7 +8,7 @@ export declare class SpwDropdown {
     /** Contrôle externe du dropdown */
     open: boolean;
     isVisible: boolean;
-    host: HTMLElement;
+    host: HTMLSpwDropdownElement;
     private dropdownEl;
     private movedContentEl;
     close(): Promise<void>;

package/dist/types/components/spw-header/spw-header-lang/spw-header-lang.d.ts

@@ -1,7 +1,7 @@
 export declare class SpwHeaderLang {
     /** Remplit l'attribut aria-label, utilisé à des fins d'accessibilité */
     accAriaLabel?: string;
-    el: HTMLElement;
+    el: HTMLSpwHeaderLangElement;
     activeLang: string;
     options: HTMLOptionElement[];
     private selectEl;

package/dist/types/components/spw-header/spw-header-persona/spw-header-persona.d.ts

@@ -3,7 +3,7 @@ export declare class SpwHeaderPersona {
     personaLabel?: string;
     /** Remplit l'attribut aria-label, utilisé à des fins d'accessibilité */
     accAriaLabel?: string;
-    el: HTMLElement;
+    el: HTMLSpwHeaderPersonaElement;
     activePersona: string;
     options: HTMLOptionElement[];
     private selectEl;

package/dist/types/components/spw-list/spw-list-item/spw-list-item.d.ts

@@ -33,6 +33,6 @@ export declare class SpwListItem {
     private setActive;
     private get elementClass();
     private get elementCatClass();
-    handleClick(): void;
+    private handleClick;
     render(): any;
 }

package/dist/types/components/spw-search-field/spw-search-field.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class SpwSearchField {
-    el: HTMLElement;
+    el: HTMLSpwSearchFieldElement;
     private hostElement;
     private hiddenInput;
     /** Événement émis lorsque la valeur du champ de recherche change */

package/dist/types/components/spw-sidebar/spw-sidebar-navigation-item/spw-sidebar-navigation-item.d.ts

@@ -1,5 +1,5 @@
 export declare class SpwSidebarNavigationItem {
-    el: HTMLElement;
+    el: HTMLSpwSidebarNavigationItemElement;
     /** A appliquer sur spw-sidebar-navigation-item, permet de définir un href sur l'élément */
     href?: string;
     /** A appliquer sur spw-sidebar-navigation-item, permet de définir une référence font-awesome sur l'élément */

package/dist/types/components/spw-sidebar/spw-sidebar.d.ts

@@ -1,5 +1,5 @@
 export declare class SpwSidebar {
-    el: HTMLElement;
+    el: HTMLSpwSidebarElement;
     /** Si true, la sidebar est dépliée par défaut */
     defaultExpanded: boolean;
     expanded: boolean;

package/dist/types/components/spw-slider/spw-slider.d.ts

@@ -1,5 +1,5 @@
 export declare class SpwSlider {
-    el: HTMLElement;
+    el: HTMLSpwSliderElement;
     /** Affiche les flèches de navigation */
     showArrows: boolean;
     /** Affiche les dots de navigation */

package/dist/types/components/spw-table/spw-table-body/spw-table-body.d.ts

@@ -1,5 +1,5 @@
 export declare class SpwTableBody {
-    el: HTMLElement;
+    el: HTMLSpwTableBodyElement;
     /** Si `true`, applique un style zébré aux lignes du tableau (à appliquer sur spw-table-body) */
     isZebra?: boolean;
     componentDidLoad(): void;

package/dist/types/components/spw-table/spw-table-cell/spw-table-cell.d.ts

@@ -1,5 +1,5 @@
 export declare class SpwTableCell {
-    el: HTMLElement;
+    el: HTMLSpwTableCellElement;
     /** Définit un colspan pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) */
     colspan?: HTMLTableCellElement['colSpan'];
     /** Définit un header relationnel pour la cellule, à des fins d'accessibilité (à appliquer sur spw-table-cell ou spw-table-header) */

package/dist/types/components/spw-tabs/spw-tabs-navigation/spw-tabs-navigation.d.ts

@@ -1,7 +1,7 @@
 export declare class SpwTabsNavigation {
     /** Remplit l'attribut aria-label, utilisé à des fins d'accessibilité */
     accAriaLabel?: string;
-    hostElement: HTMLElement;
+    hostElement: HTMLSpwTabsNavigationElement;
     showLeftArrow: boolean;
     showRightArrow: boolean;
     private ulElement;

package/dist/types/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class SpwTabsNavigationItem {
-    el: HTMLElement;
+    el: HTMLSpwTabsNavigationItemElement;
     /** Définit un id pour le tab */
     tabId: string;
     /** Définit si le tab est actif ou non */

package/dist/types/components/spw-tabs/spw-tabs.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class SpwTabs {
-    el: HTMLElement;
+    el: HTMLSpwTabsElement;
     /** Onglet actif par défaut */
     defaultActiveTab: string;
     /** Variante des onglets */

package/dist/types/components/spw-tag/spw-tag.d.ts

@@ -11,7 +11,7 @@ export declare class SpwTag {
     target: string;
     /** Définit la taille du tag */
     size?: 'small' | 'medium' | 'large';
-    getIcon: (variant: any) => any;
+    private getIcon;
     private get elementClass();
     render(): any;
 }

package/dist/types/components/spw-toc/spw-toc-container/spw-toc-container.d.ts

@@ -5,7 +5,7 @@ export interface TocItem {
     level: number;
 }
 export declare class SpwTocContainer {
-    el: HTMLElement;
+    el: HTMLSpwTocContainerElement;
     tocItemsChanged: EventEmitter<TocItem[]>;
     private observer;
     componentDidLoad(): void;

package/dist/types/components/spw-toc/spw-toc-navigation/spw-toc-navigation.d.ts

@@ -1,6 +1,6 @@
 import type { TocItem } from '../spw-toc-container/spw-toc-container';
 export declare class SpwTocNavigation {
-    el: HTMLElement;
+    el: HTMLSpwTocNavigationElement;
     items: TocItem[];
     currentItemIndex: number;
     currentH2Index: number;

package/dist/types/components/spw-tooltip/spw-tooltip.d.ts

@@ -11,7 +11,7 @@ export declare class SpwTooltip {
     cursor: 'pointer' | 'default' | 'help' | 'disabled';
     visible: boolean;
     isVisible: boolean;
-    host: HTMLElement;
+    host: HTMLSpwTooltipElement;
     private tooltipEl;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/hydrate/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@spw-ds/spw-stencil-library/hydrate",
+  "name": "@service-public-de-wallonie/spw-stencil-library/hydrate",
   "description": "SpwStencilLibrary component hydration app.",
   "main": "index.js",
   "types": "index.d.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spw-ds/spw-stencil-library",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "description": "Design System du SPW. Librairie Stencil.",
   "readme": "../../README.md",
   "main": "dist/index.cjs.js",
@@ -29,7 +29,7 @@
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
-    "lint": "eslint --ext .jsx,.js,.tsx,.ts src/ --fix",
+    "lint": "eslint src/ --fix",
     "tokens": "node .sd/config.js",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -48,7 +48,10 @@
     "@etchteam/storybook-addon-status": "^5.0.0",
     "@jest/transform": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@stencil-community/eslint-plugin": "^0.8.0",
+    "@stencil/eslint-plugin": "^1.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "eslint": "^9.0.0",
     "@stencil-community/postcss": "^2.1.0",
     "@stencil/angular-output-target": "^0.10.2",
     "@stencil/react-output-target": "0.7.1",
@@ -60,7 +63,7 @@
     "@storybook/web-components": "^8.3.0",
     "@storybook/web-components-webpack5": "^8.3.0",
     "@types/jest": "^29.5.6",
-    "@types/node": "^16.18.11",
+    "@types/node": "^20.11.7",
     "@types/react": "^18.0.38",
     "@types/react-dom": "^18.0.11",
     "@whitespace/storybook-addon-html": "^7.0.0",
@@ -70,6 +73,9 @@
     "cssnano": "^6.0.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.37.4",
+    "globals": "^15.0.0",
+    "typescript-eslint": "^8.0.0",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-environment-node": "^29.7.0",
@@ -83,5 +89,8 @@
     "ts-loader": "^9.5.1",
     "typescript": "^5.8.2"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "license": "MIT"
 }

package/{README.md → readme.md}

@@ -1,16 +1,16 @@
-# SPW Design System
-
-Le **SPW Design System** est une bibliothèque de composants Web conçue pour créer des interfaces utilisateur cohérentes, accessibles et maintenables dans toutes les applications web du Service Public de Wallonie.
-
-## Documentation et guides
-
-- [Documentation complète sur ZeroHeight](https://zeroheight.com/2310c7a1e/p/44e962-design-system-du-spw) : Découvrez les principes de design, les guidelines, et les spécifications de chaque composant.
-- [Storybook interactif](https://main--6698db7bdfc632c36f76afdb.chromatic.com/) : Explorez et testez les composants en action, avec des exemples détaillés et des cas d'utilisation.
-
-## Compatibilité
-
-Les composants sont développés en utilisant [StencilJS](https://stenciljs.com/), ce qui garantit une compatibilité native avec tous les frameworks modernes (tels que React et Angular) ainsi qu'avec des projets sans framework.
-
-## Contribution
-
-Pour contribuer ou poser des questions, référez-vous à [notre documentation ZeroHeight](https://zeroheight.com/2310c7a1e/p/44e962-design-system-du-spw) ou [contactez l’équipe de développement](mailto:pierre.henrion.ext@spw.wallonie.be).
+# SPW Design System
+
+Le **SPW Design System** est une bibliothèque de composants Web conçue pour créer des interfaces utilisateur cohérentes, accessibles et maintenables dans toutes les applications web du Service Public de Wallonie.
+
+## Documentation et guides
+
+- [Documentation complète sur ZeroHeight](https://zeroheight.com/2310c7a1e/p/44e962-design-system-du-spw) : Découvrez les principes de design, les guidelines, et les spécifications de chaque composant.
+- [Storybook interactif](https://main--6698db7bdfc632c36f76afdb.chromatic.com/) : Explorez et testez les composants en action, avec des exemples détaillés et des cas d'utilisation.
+
+## Compatibilité
+
+Les composants sont développés en utilisant [StencilJS](https://stenciljs.com/), ce qui garantit une compatibilité native avec tous les frameworks modernes (tels que React et Angular) ainsi qu'avec des projets sans framework.
+
+## Contribution
+
+Pour contribuer ou poser des questions, référez-vous à [notre documentation ZeroHeight](https://zeroheight.com/2310c7a1e/p/44e962-design-system-du-spw) ou [contactez l’équipe de développement](mailto:pierre.henrion.ext@spw.wallonie.be).