@fristil/designsystem 0.2.0

package/dist/components/css/fieldset/fieldset.d.ts

@@ -0,0 +1,55 @@
+import { type FieldState, type NonDefaultFieldState, type RequiredMarker } from "../shared.js";
+export declare const FIELDSET_CLASS: "fs-fieldset";
+export declare const LEGEND_CLASS: "fs-legend";
+export type FieldsetOptions = {
+    /** Valideringstilstand for hele gruppen. Standard: `default`. */
+    state?: FieldState;
+    /** Slår av alle kontrollene i gruppen. */
+    disabled?: boolean;
+};
+export type FieldsetAttributes = {
+    class: typeof FIELDSET_CLASS;
+    "data-state"?: NonDefaultFieldState;
+    disabled?: true;
+};
+export type LegendOptions = {
+    /** Marker gruppen som påkrevd, med stjerne eller med ordet «(påkrevd)». */
+    required?: RequiredMarker;
+    /** Marker gruppen som valgfri. Velg én av `required` og `optional`. */
+    optional?: boolean;
+    /** Demper teksten når gruppen er slått av. */
+    disabled?: boolean;
+};
+export type LegendAttributes = {
+    class: typeof LEGEND_CLASS;
+    "data-required"?: RequiredMarker;
+    "data-optional"?: "";
+    "aria-disabled"?: "true";
+};
+/**
+ * Attributtene for en gruppe med kontroller som hører sammen.
+ *
+ * `<fieldset>` med `<legend>` er den ene måten å gi et sett radioknapper eller
+ * avkryssingsbokser en felles ledetekst som skjermlesere faktisk leser opp
+ * før hvert valg.
+ *
+ * ```ts
+ * <fieldset {...fieldset({ state: "invalid" })}>
+ *   <legend {...legend({ required: "symbol" })}>Leveringsmåte</legend>
+ * </fieldset>
+ * ```
+ */
+export declare const fieldset: (({ state, disabled }?: FieldsetOptions) => FieldsetAttributes) & {
+    states: readonly ["default", "invalid", "success"];
+    isState: (value: string) => value is "default" | "success" | "invalid";
+};
+/**
+ * Attributtene for ledeteksten på en gruppe.
+ *
+ * Samme markering som `label()`, men på et `<legend>`.
+ */
+export declare const legend: (({ required, optional, disabled }?: LegendOptions) => LegendAttributes) & {
+    markers: readonly ["symbol", "text"];
+    isMarker: (value: string) => value is "symbol" | "text";
+};
+//# sourceMappingURL=fieldset.d.ts.map

package/dist/components/css/fieldset/fieldset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.d.ts","sourceRoot":"","sources":["../../../../src/components/css/fieldset/fieldset.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,UAAU,EAGf,KAAK,oBAAoB,EACzB,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,cAAc,EAAG,aAAsB,CAAA;AACpD,eAAO,MAAM,YAAY,EAAG,WAAoB,CAAA;AAEhD,MAAM,MAAM,eAAe,GAAG;IAC5B,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,OAAO,cAAc,CAAA;IAC5B,YAAY,CAAC,EAAE,oBAAoB,CAAA;IACnC,QAAQ,CAAC,EAAE,IAAI,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,OAAO,YAAY,CAAA;IAC1B,eAAe,CAAC,EAAE,cAAc,CAAA;IAChC,eAAe,CAAC,EAAE,EAAE,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,0BACe,eAAe,KAAQ,kBAAkB;;;CAU5E,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,uCACkB,aAAa,KAAQ,gBAAgB;;;CAWzE,CAAA"}

package/dist/components/css/fieldset/fieldset.js

@@ -0,0 +1,39 @@
+import { attributes, createGuard, fieldStates, isFieldState, requiredMarkers, } from "../shared.js";
+export const FIELDSET_CLASS = "fs-fieldset";
+export const LEGEND_CLASS = "fs-legend";
+/**
+ * Attributtene for en gruppe med kontroller som hører sammen.
+ *
+ * `<fieldset>` med `<legend>` er den ene måten å gi et sett radioknapper eller
+ * avkryssingsbokser en felles ledetekst som skjermlesere faktisk leser opp
+ * før hvert valg.
+ *
+ * ```ts
+ * <fieldset {...fieldset({ state: "invalid" })}>
+ *   <legend {...legend({ required: "symbol" })}>Leveringsmåte</legend>
+ * </fieldset>
+ * ```
+ */
+export const fieldset = Object.assign(({ state = "default", disabled } = {}) => attributes({
+    class: FIELDSET_CLASS,
+    "data-state": state === "default" ? undefined : state,
+    disabled: disabled ? true : undefined,
+}), {
+    states: fieldStates,
+    isState: isFieldState,
+});
+/**
+ * Attributtene for ledeteksten på en gruppe.
+ *
+ * Samme markering som `label()`, men på et `<legend>`.
+ */
+export const legend = Object.assign(({ required, optional, disabled } = {}) => attributes({
+    class: LEGEND_CLASS,
+    "data-required": required,
+    "data-optional": optional && !required ? "" : undefined,
+    "aria-disabled": disabled ? "true" : undefined,
+}), {
+    markers: requiredMarkers,
+    isMarker: createGuard(requiredMarkers),
+});
+//# sourceMappingURL=fieldset.js.map

package/dist/components/css/fieldset/fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.js","sourceRoot":"","sources":["../../../../src/components/css/fieldset/fieldset.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,WAAW,EAEX,WAAW,EACX,YAAY,EAGZ,eAAe,GAChB,MAAM,cAAc,CAAA;AAErB,MAAM,CAAC,MAAM,cAAc,GAAG,aAAsB,CAAA;AACpD,MAAM,CAAC,MAAM,YAAY,GAAG,WAAoB,CAAA;AA+BhD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CACnC,CAAC,EAAE,KAAK,GAAG,SAAS,EAAE,QAAQ,KAAsB,EAAE,EAAsB,EAAE,CAC5E,UAAU,CAAC;IACT,KAAK,EAAE,cAAc;IACrB,YAAY,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;IACrD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAE,IAAc,CAAC,CAAC,CAAC,SAAS;CACjD,CAAC,EACJ;IACE,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,YAAY;CACtB,CACF,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CACjC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,KAAoB,EAAE,EAAoB,EAAE,CACzE,UAAU,CAAC;IACT,KAAK,EAAE,YAAY;IACnB,eAAe,EAAE,QAAQ;IACzB,eAAe,EAAE,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAE,EAAY,CAAC,CAAC,CAAC,SAAS;IAClE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;CAC1D,CAAC,EACJ;IACE,OAAO,EAAE,eAAe;IACxB,QAAQ,EAAE,WAAW,CAAC,eAAe,CAAC;CACvC,CACF,CAAA"}

package/dist/components/css/file-upload/file-upload.d.ts

@@ -0,0 +1,41 @@
+import { type FieldState, type NonDefaultFieldState } from "../shared.js";
+export declare const FILE_UPLOAD_CLASS: "fs-file-upload";
+/** Lista over filene som er valgt. */
+export declare const FILE_UPLOAD_LIST_CLASS: "fs-file-upload-list";
+export type FileUploadOptions = {
+    /** Valideringstilstand. Standard: `default`. */
+    state?: FieldState;
+    /** Tillat flere filer. */
+    multiple?: boolean;
+    /** Filtypene feltet tar imot, som `.pdf,image/*`. */
+    accept?: string;
+};
+export type FileUploadAttributes = {
+    class: typeof FILE_UPLOAD_CLASS;
+    type: "file";
+    multiple?: true;
+    accept?: string;
+    "data-state"?: NonDefaultFieldState;
+    "aria-invalid"?: "true";
+};
+/**
+ * Attributtene for et filopplastingsfelt.
+ *
+ * Feltet er et vanlig `<input type="file">`. Knappen inni er nettleserens
+ * egen, og teksten på den kommer fra operativsystemets språk. Den kan ikke
+ * oversettes, så ledeteksten over feltet må si hva som skal lastes opp.
+ *
+ * `accept` er en hjelp i filvelgeren, ikke en sperre. Brukeren kan velge
+ * «alle filer», så typen må sjekkes på serveren uansett.
+ *
+ * ```ts
+ * <input {...fileUpload({ multiple: true, accept: ".pdf" })} />
+ * ```
+ */
+export declare const fileUpload: (({ state, multiple, accept, }?: FileUploadOptions) => FileUploadAttributes) & {
+    /** Klassen på lista over valgte filer. */
+    list: "fs-file-upload-list";
+    states: readonly ["default", "invalid", "success"];
+    isState: (value: string) => value is "default" | "success" | "invalid";
+};
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/components/css/file-upload/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../../src/components/css/file-upload/file-upload.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,UAAU,EAGf,KAAK,oBAAoB,EAC1B,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,iBAAiB,EAAG,gBAAyB,CAAA;AAC1D,sCAAsC;AACtC,eAAO,MAAM,sBAAsB,EAAG,qBAA8B,CAAA;AAEpE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gDAAgD;IAChD,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,OAAO,iBAAiB,CAAA;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,oBAAoB,CAAA;IACnC,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,mCAKlB,iBAAiB,KAAQ,oBAAoB;IAU9C,0CAA0C;;;;CAK7C,CAAA"}

package/dist/components/css/file-upload/file-upload.js

@@ -0,0 +1,32 @@
+import { attributes, fieldStates, isFieldState, } from "../shared.js";
+export const FILE_UPLOAD_CLASS = "fs-file-upload";
+/** Lista over filene som er valgt. */
+export const FILE_UPLOAD_LIST_CLASS = "fs-file-upload-list";
+/**
+ * Attributtene for et filopplastingsfelt.
+ *
+ * Feltet er et vanlig `<input type="file">`. Knappen inni er nettleserens
+ * egen, og teksten på den kommer fra operativsystemets språk. Den kan ikke
+ * oversettes, så ledeteksten over feltet må si hva som skal lastes opp.
+ *
+ * `accept` er en hjelp i filvelgeren, ikke en sperre. Brukeren kan velge
+ * «alle filer», så typen må sjekkes på serveren uansett.
+ *
+ * ```ts
+ * <input {...fileUpload({ multiple: true, accept: ".pdf" })} />
+ * ```
+ */
+export const fileUpload = Object.assign(({ state = "default", multiple, accept, } = {}) => attributes({
+    class: FILE_UPLOAD_CLASS,
+    type: "file",
+    multiple: multiple ? true : undefined,
+    accept,
+    "data-state": state === "default" ? undefined : state,
+    "aria-invalid": state === "invalid" ? "true" : undefined,
+}), {
+    /** Klassen på lista over valgte filer. */
+    list: FILE_UPLOAD_LIST_CLASS,
+    states: fieldStates,
+    isState: isFieldState,
+});
+//# sourceMappingURL=file-upload.js.map

package/dist/components/css/file-upload/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","sourceRoot":"","sources":["../../../../src/components/css/file-upload/file-upload.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,WAAW,EACX,YAAY,GAEb,MAAM,cAAc,CAAA;AAErB,MAAM,CAAC,MAAM,iBAAiB,GAAG,gBAAyB,CAAA;AAC1D,sCAAsC;AACtC,MAAM,CAAC,MAAM,sBAAsB,GAAG,qBAA8B,CAAA;AAoBpE;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CACrC,CAAC,EACC,KAAK,GAAG,SAAS,EACjB,QAAQ,EACR,MAAM,MACe,EAAE,EAAwB,EAAE,CACjD,UAAU,CAAC;IACT,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,MAAe;IACrB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAE,IAAc,CAAC,CAAC,CAAC,SAAS;IAChD,MAAM;IACN,YAAY,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;IACrD,cAAc,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;CACpE,CAAC,EACJ;IACE,0CAA0C;IAC1C,IAAI,EAAE,sBAAsB;IAC5B,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,YAAY;CACtB,CACF,CAAA"}

package/dist/components/css/heading/heading.d.ts

@@ -0,0 +1,29 @@
+export declare const HEADING_CLASS: "fs-heading";
+export declare const headingSizes: readonly ["xs", "s", "m", "l", "xl", "mega"];
+export type HeadingSize = (typeof headingSizes)[number];
+export type NonDefaultHeadingSize = Exclude<HeadingSize, "l">;
+export type HeadingOptions = {
+    /** Visuell størrelse. Standard: `l`. */
+    size?: HeadingSize;
+};
+export type HeadingAttributes = {
+    class: typeof HEADING_CLASS;
+    "data-size"?: NonDefaultHeadingSize;
+};
+/**
+ * Attributtene for en overskrift.
+ *
+ * Størrelsen og nivået er to forskjellige ting. Nivået er `<h1>` til `<h6>`
+ * og bestemmer strukturen skjermlesere navigerer etter; `size` bestemmer bare
+ * hvor stor teksten ser ut. En `<h2>` som skal se liten ut er riktig; en
+ * `<h4>` valgt fordi den var liten nok, hopper over et nivå i strukturen.
+ *
+ * ```ts
+ * <h2 {...heading({ size: "m" })}>Vedlegg</h2>
+ * ```
+ */
+export declare const heading: (({ size }?: HeadingOptions) => HeadingAttributes) & {
+    sizes: readonly ["xs", "s", "m", "l", "xl", "mega"];
+    isSize: (value: string) => value is "l" | "xs" | "s" | "m" | "xl" | "mega";
+};
+//# sourceMappingURL=heading.d.ts.map

package/dist/components/css/heading/heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../../src/components/css/heading/heading.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,EAAG,YAAqB,CAAA;AAElD,eAAO,MAAM,YAAY,8CAA+C,CAAA;AAExE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,CAAA;AAE7D,MAAM,MAAM,cAAc,GAAG;IAC3B,wCAAwC;IACxC,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,OAAO,aAAa,CAAA;IAC3B,WAAW,CAAC,EAAE,qBAAqB,CAAA;CACpC,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,eACD,cAAc,KAAQ,iBAAiB;;;CASzD,CAAA"}

package/dist/components/css/heading/heading.js

@@ -0,0 +1,23 @@
+import { attributes, createGuard } from "../shared.js";
+export const HEADING_CLASS = "fs-heading";
+export const headingSizes = ["xs", "s", "m", "l", "xl", "mega"];
+/**
+ * Attributtene for en overskrift.
+ *
+ * Størrelsen og nivået er to forskjellige ting. Nivået er `<h1>` til `<h6>`
+ * og bestemmer strukturen skjermlesere navigerer etter; `size` bestemmer bare
+ * hvor stor teksten ser ut. En `<h2>` som skal se liten ut er riktig; en
+ * `<h4>` valgt fordi den var liten nok, hopper over et nivå i strukturen.
+ *
+ * ```ts
+ * <h2 {...heading({ size: "m" })}>Vedlegg</h2>
+ * ```
+ */
+export const heading = Object.assign(({ size = "l" } = {}) => attributes({
+    class: HEADING_CLASS,
+    "data-size": size === "l" ? undefined : size,
+}), {
+    sizes: headingSizes,
+    isSize: createGuard(headingSizes),
+});
+//# sourceMappingURL=heading.js.map

package/dist/components/css/heading/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../../src/components/css/heading/heading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAG,YAAqB,CAAA;AAElD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,CAAU,CAAA;AAexE;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAClC,CAAC,EAAE,IAAI,GAAG,GAAG,KAAqB,EAAE,EAAqB,EAAE,CACzD,UAAU,CAAC;IACT,KAAK,EAAE,aAAa;IACpB,WAAW,EAAE,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;CAC7C,CAAC,EACJ;IACE,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC;CAClC,CACF,CAAA"}

package/dist/components/css/help-text/help-text.d.ts

@@ -0,0 +1,24 @@
+export declare const HELP_TEXT_CLASS: "fs-help-text";
+export declare const helpTextVariants: readonly ["muted", "default", "success", "warning"];
+export type HelpTextVariant = (typeof helpTextVariants)[number];
+export type NonDefaultHelpTextVariant = Exclude<HelpTextVariant, "muted">;
+export type HelpTextOptions = {
+    /** Hvor mye teksten skal rope. Standard: `muted`. */
+    variant?: HelpTextVariant;
+};
+export type HelpTextAttributes = {
+    class: typeof HELP_TEXT_CLASS;
+    "data-variant"?: NonDefaultHelpTextVariant;
+};
+/**
+ * Attributtene for hjelpetekst under et felt.
+ *
+ * ```ts
+ * <p {...helpText({ variant: "warning" })}>…</p>
+ * ```
+ */
+export declare const helpText: (({ variant }?: HelpTextOptions) => HelpTextAttributes) & {
+    variants: readonly ["muted", "default", "success", "warning"];
+    isVariant: (value: string) => value is "default" | "warning" | "success" | "muted";
+};
+//# sourceMappingURL=help-text.d.ts.map

package/dist/components/css/help-text/help-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"help-text.d.ts","sourceRoot":"","sources":["../../../../src/components/css/help-text/help-text.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,EAAG,cAAuB,CAAA;AAEtD,eAAO,MAAM,gBAAgB,qDAKnB,CAAA;AAEV,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC/D,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;AAEzE,MAAM,MAAM,eAAe,GAAG;IAC5B,qDAAqD;IACrD,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,OAAO,eAAe,CAAA;IAC7B,cAAc,CAAC,EAAE,yBAAyB,CAAA;CAC3C,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,kBACK,eAAe,KAAQ,kBAAkB;;;CASlE,CAAA"}

package/dist/components/css/help-text/help-text.js

@@ -0,0 +1,23 @@
+import { attributes, createGuard } from "../shared.js";
+export const HELP_TEXT_CLASS = "fs-help-text";
+export const helpTextVariants = [
+    "muted",
+    "default",
+    "success",
+    "warning",
+];
+/**
+ * Attributtene for hjelpetekst under et felt.
+ *
+ * ```ts
+ * <p {...helpText({ variant: "warning" })}>…</p>
+ * ```
+ */
+export const helpText = Object.assign(({ variant = "muted" } = {}) => attributes({
+    class: HELP_TEXT_CLASS,
+    "data-variant": variant === "muted" ? undefined : variant,
+}), {
+    variants: helpTextVariants,
+    isVariant: createGuard(helpTextVariants),
+});
+//# sourceMappingURL=help-text.js.map

package/dist/components/css/help-text/help-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"help-text.js","sourceRoot":"","sources":["../../../../src/components/css/help-text/help-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,eAAe,GAAG,cAAuB,CAAA;AAEtD,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO;IACP,SAAS;IACT,SAAS;IACT,SAAS;CACD,CAAA;AAeV;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CACnC,CAAC,EAAE,OAAO,GAAG,OAAO,KAAsB,EAAE,EAAsB,EAAE,CAClE,UAAU,CAAC;IACT,KAAK,EAAE,eAAe;IACtB,cAAc,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;CAC1D,CAAC,EACJ;IACE,QAAQ,EAAE,gBAAgB;IAC1B,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC;CACzC,CACF,CAAA"}

package/dist/components/css/input/input.d.ts

@@ -0,0 +1,39 @@
+import { type FieldState, type NonDefaultFieldState } from "../shared.js";
+export declare const INPUT_CLASS: "fs-input";
+export declare const inputTypes: readonly ["text", "password", "email", "number", "date", "datetime-local", "week", "month", "tel", "url", "search", "time"];
+export type InputType = (typeof inputTypes)[number];
+/** Typene som får et ikon i feltet, og som åpner nettleserens egen velger. */
+declare const TYPER_MED_IKON: readonly ["date", "time", "datetime-local"];
+type TypeMedIkon = (typeof TYPER_MED_IKON)[number];
+export type InputOptions = {
+    /** HTML-typen. Settes som `type`, og styrer ikonet. Standard: `text`. */
+    type?: InputType;
+    /** Valideringstilstand. Standard: `default`. */
+    state?: FieldState;
+};
+export type InputAttributes = {
+    class: typeof INPUT_CLASS;
+    type: InputType;
+    "data-variant"?: TypeMedIkon;
+    "data-state"?: NonDefaultFieldState;
+    "aria-invalid"?: "true";
+};
+/**
+ * Attributtene for et tekstfelt.
+ *
+ * `type` setter både HTML-typen og ikonvarianten, så de to kan ikke komme i
+ * utakt. Skriver du dem for hånd, er det lett å få et datofelt som ser ut
+ * som et datofelt, men der ingenting skjer når brukeren trykker på ikonet.
+ *
+ * ```ts
+ * <input {...input({ type: "date", state: "invalid" })} />
+ * ```
+ */
+export declare const input: (({ type, state }?: InputOptions) => InputAttributes) & {
+    types: readonly ["text", "password", "email", "number", "date", "datetime-local", "week", "month", "tel", "url", "search", "time"];
+    isType: (value: string) => value is "number" | "date" | "search" | "url" | "text" | "password" | "email" | "datetime-local" | "week" | "month" | "tel" | "time";
+    states: readonly ["default", "invalid", "success"];
+    isState: (value: string) => value is "default" | "success" | "invalid";
+};
+export {};
+//# sourceMappingURL=input.d.ts.map

package/dist/components/css/input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/css/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,UAAU,EAGf,KAAK,oBAAoB,EAC1B,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,WAAW,EAAG,UAAmB,CAAA;AAE9C,eAAO,MAAM,UAAU,6HAab,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnD,8EAA8E;AAC9E,QAAA,MAAM,cAAc,6CAA8C,CAAA;AAClE,KAAK,WAAW,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAElD,MAAM,MAAM,YAAY,GAAG;IACzB,yEAAyE;IACzE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,gDAAgD;IAChD,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,OAAO,WAAW,CAAA;IACzB,IAAI,EAAE,SAAS,CAAA;IACf,cAAc,CAAC,EAAE,WAAW,CAAA;IAC5B,YAAY,CAAC,EAAE,oBAAoB,CAAA;IACnC,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,sBACuB,YAAY,KAAQ,eAAe;;;;;CAgB3E,CAAA"}

package/dist/components/css/input/input.js

@@ -0,0 +1,44 @@
+import { attributes, createGuard, fieldStates, isFieldState, } from "../shared.js";
+export const INPUT_CLASS = "fs-input";
+export const inputTypes = [
+    "text",
+    "password",
+    "email",
+    "number",
+    "date",
+    "datetime-local",
+    "week",
+    "month",
+    "tel",
+    "url",
+    "search",
+    "time",
+];
+/** Typene som får et ikon i feltet, og som åpner nettleserens egen velger. */
+const TYPER_MED_IKON = ["date", "time", "datetime-local"];
+/**
+ * Attributtene for et tekstfelt.
+ *
+ * `type` setter både HTML-typen og ikonvarianten, så de to kan ikke komme i
+ * utakt. Skriver du dem for hånd, er det lett å få et datofelt som ser ut
+ * som et datofelt, men der ingenting skjer når brukeren trykker på ikonet.
+ *
+ * ```ts
+ * <input {...input({ type: "date", state: "invalid" })} />
+ * ```
+ */
+export const input = Object.assign(({ type = "text", state = "default" } = {}) => attributes({
+    class: INPUT_CLASS,
+    type,
+    "data-variant": TYPER_MED_IKON.includes(type)
+        ? type
+        : undefined,
+    "data-state": state === "default" ? undefined : state,
+    "aria-invalid": state === "invalid" ? "true" : undefined,
+}), {
+    types: inputTypes,
+    isType: createGuard(inputTypes),
+    states: fieldStates,
+    isState: isFieldState,
+});
+//# sourceMappingURL=input.js.map

package/dist/components/css/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../src/components/css/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,WAAW,EAEX,WAAW,EACX,YAAY,GAEb,MAAM,cAAc,CAAA;AAErB,MAAM,CAAC,MAAM,WAAW,GAAG,UAAmB,CAAA;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM;IACN,UAAU;IACV,OAAO;IACP,QAAQ;IACR,MAAM;IACN,gBAAgB;IAChB,MAAM;IACN,OAAO;IACP,KAAK;IACL,KAAK;IACL,QAAQ;IACR,MAAM;CACE,CAAA;AAIV,8EAA8E;AAC9E,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,CAAU,CAAA;AAkBlE;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAChC,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,GAAG,SAAS,KAAmB,EAAE,EAAmB,EAAE,CAC3E,UAAU,CAAC;IACT,KAAK,EAAE,WAAW;IAClB,IAAI;IACJ,cAAc,EAAG,cAAoC,CAAC,QAAQ,CAAC,IAAI,CAAC;QAClE,CAAC,CAAE,IAAoB;QACvB,CAAC,CAAC,SAAS;IACb,YAAY,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;IACrD,cAAc,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;CACpE,CAAC,EACJ;IACE,KAAK,EAAE,UAAU;IACjB,MAAM,EAAE,WAAW,CAAC,UAAU,CAAC;IAC/B,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,YAAY;CACtB,CACF,CAAA"}

package/dist/components/css/label/label.d.ts

@@ -0,0 +1,33 @@
+import { type RequiredMarker, requiredMarkers } from "../shared.js";
+export declare const LABEL_CLASS: "fs-label";
+export type { RequiredMarker };
+export { requiredMarkers };
+export type LabelOptions = {
+    /** Marker feltet som påkrevd, med stjerne eller med ordet «(påkrevd)». */
+    required?: RequiredMarker;
+    /** Marker feltet som valgfritt. Velg én av `required` og `optional`. */
+    optional?: boolean;
+    /** Demper teksten når kontrollen er slått av. */
+    disabled?: boolean;
+};
+export type LabelAttributes = {
+    class: typeof LABEL_CLASS;
+    "data-required"?: RequiredMarker;
+    "data-optional"?: "";
+    "aria-disabled"?: "true";
+};
+/**
+ * Attributtene for en ledetekst.
+ *
+ * Markeringen er bare visuell, så sett `required` på selve feltet i tillegg,
+ * ellers får skjermleseren ikke vite at det må fylles ut.
+ *
+ * ```ts
+ * <label {...label({ required: "symbol" })} htmlFor="epost">E-postadresse</label>
+ * ```
+ */
+export declare const label: (({ required, optional, disabled }?: LabelOptions) => LabelAttributes) & {
+    markers: readonly ["symbol", "text"];
+    isMarker: (value: string) => value is "symbol" | "text";
+};
+//# sourceMappingURL=label.d.ts.map

package/dist/components/css/label/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../../src/components/css/label/label.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACnB,eAAe,EAChB,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,WAAW,EAAG,UAAmB,CAAA;AAE9C,YAAY,EAAE,cAAc,EAAE,CAAA;AAC9B,OAAO,EAAE,eAAe,EAAE,CAAA;AAE1B,MAAM,MAAM,YAAY,GAAG;IACzB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,OAAO,WAAW,CAAA;IACzB,eAAe,CAAC,EAAE,cAAc,CAAA;IAChC,eAAe,CAAC,EAAE,EAAE,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,uCACmB,YAAY,KAAQ,eAAe;;;CAWvE,CAAA"}

package/dist/components/css/label/label.js

@@ -0,0 +1,23 @@
+import { attributes, createGuard, requiredMarkers, } from "../shared.js";
+export const LABEL_CLASS = "fs-label";
+export { requiredMarkers };
+/**
+ * Attributtene for en ledetekst.
+ *
+ * Markeringen er bare visuell, så sett `required` på selve feltet i tillegg,
+ * ellers får skjermleseren ikke vite at det må fylles ut.
+ *
+ * ```ts
+ * <label {...label({ required: "symbol" })} htmlFor="epost">E-postadresse</label>
+ * ```
+ */
+export const label = Object.assign(({ required, optional, disabled } = {}) => attributes({
+    class: LABEL_CLASS,
+    "data-required": required,
+    "data-optional": optional && !required ? "" : undefined,
+    "aria-disabled": disabled ? "true" : undefined,
+}), {
+    markers: requiredMarkers,
+    isMarker: createGuard(requiredMarkers),
+});
+//# sourceMappingURL=label.js.map

package/dist/components/css/label/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../../src/components/css/label/label.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,WAAW,EAEX,eAAe,GAChB,MAAM,cAAc,CAAA;AAErB,MAAM,CAAC,MAAM,WAAW,GAAG,UAAmB,CAAA;AAG9C,OAAO,EAAE,eAAe,EAAE,CAAA;AAkB1B;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAChC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,KAAmB,EAAE,EAAmB,EAAE,CACvE,UAAU,CAAC;IACT,KAAK,EAAE,WAAW;IAClB,eAAe,EAAE,QAAQ;IACzB,eAAe,EAAE,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAE,EAAY,CAAC,CAAC,CAAC,SAAS;IAClE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;CAC1D,CAAC,EACJ;IACE,OAAO,EAAE,eAAe;IACxB,QAAQ,EAAE,WAAW,CAAC,eAAe,CAAC;CACvC,CACF,CAAA"}

package/dist/components/css/link/link.d.ts

@@ -0,0 +1,21 @@
+export declare const LINK_CLASS: "fs-link";
+export type LinkOptions = {
+    /**
+     * Lenken er ikke klikkbar ennå. Gir `aria-disabled` framfor å fjerne
+     * `href`, slik at skjermlesere fortsatt finner den og kan si fra.
+     */
+    disabled?: boolean;
+};
+export type LinkAttributes = {
+    class: typeof LINK_CLASS;
+    "aria-disabled"?: "true";
+};
+/**
+ * Attributtene for en lenke.
+ *
+ * ```ts
+ * <a {...link()} href="/kvittering">Se kvittering</a>
+ * ```
+ */
+export declare const link: ({ disabled }?: LinkOptions) => LinkAttributes;
+//# sourceMappingURL=link.d.ts.map

package/dist/components/css/link/link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../../src/components/css/link/link.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,EAAG,SAAkB,CAAA;AAE5C,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,IAAI,GAAI,eAAsB,WAAgB,KAAG,cAI1D,CAAA"}

package/dist/components/css/link/link.js

@@ -0,0 +1,14 @@
+import { attributes } from "../shared.js";
+export const LINK_CLASS = "fs-link";
+/**
+ * Attributtene for en lenke.
+ *
+ * ```ts
+ * <a {...link()} href="/kvittering">Se kvittering</a>
+ * ```
+ */
+export const link = ({ disabled = false } = {}) => attributes({
+    class: LINK_CLASS,
+    "aria-disabled": disabled ? "true" : undefined,
+});
+//# sourceMappingURL=link.js.map

package/dist/components/css/link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../../src/components/css/link/link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,CAAC,MAAM,UAAU,GAAG,SAAkB,CAAA;AAe5C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,GAAG,KAAK,KAAkB,EAAE,EAAkB,EAAE,CAC7E,UAAU,CAAC;IACT,KAAK,EAAE,UAAU;IACjB,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;CAC1D,CAAC,CAAA"}

package/dist/components/css/list/list.d.ts

@@ -0,0 +1,29 @@
+export declare const LIST_CLASS: "fs-list";
+export declare const listVariants: readonly ["default", "plain", "divided"];
+export type ListVariant = (typeof listVariants)[number];
+export type NonDefaultListVariant = Exclude<ListVariant, "default">;
+export type ListOptions = {
+    /** Punkter, rene rader, eller rader med strek mellom. Standard: `default`. */
+    variant?: ListVariant;
+};
+export type ListAttributes = {
+    class: typeof LIST_CLASS;
+    "data-variant"?: NonDefaultListVariant;
+};
+/**
+ * Attributtene for en liste.
+ *
+ * Klassen hører på `<ul>` eller `<ol>`. `plain` og `divided` fjerner punktene
+ * visuelt, men listen blir værende en liste, så skjermleseren sier fortsatt
+ * hvor mange elementer den har. Det er grunnen til at varianten finnes: uten
+ * den ville folk brukt `<div>` for å bli kvitt punktene.
+ *
+ * ```ts
+ * <ul {...list({ variant: "divided" })}>…</ul>
+ * ```
+ */
+export declare const list: (({ variant }?: ListOptions) => ListAttributes) & {
+    variants: readonly ["default", "plain", "divided"];
+    isVariant: (value: string) => value is "default" | "plain" | "divided";
+};
+//# sourceMappingURL=list.d.ts.map

package/dist/components/css/list/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/components/css/list/list.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,EAAG,SAAkB,CAAA;AAE5C,eAAO,MAAM,YAAY,0CAA2C,CAAA;AAEpE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;AAEnE,MAAM,MAAM,WAAW,GAAG;IACxB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,cAAc,CAAC,EAAE,qBAAqB,CAAA;CACvC,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI,kBACW,WAAW,KAAQ,cAAc;;;CAS5D,CAAA"}

package/dist/components/css/list/list.js

@@ -0,0 +1,23 @@
+import { attributes, createGuard } from "../shared.js";
+export const LIST_CLASS = "fs-list";
+export const listVariants = ["default", "plain", "divided"];
+/**
+ * Attributtene for en liste.
+ *
+ * Klassen hører på `<ul>` eller `<ol>`. `plain` og `divided` fjerner punktene
+ * visuelt, men listen blir værende en liste, så skjermleseren sier fortsatt
+ * hvor mange elementer den har. Det er grunnen til at varianten finnes: uten
+ * den ville folk brukt `<div>` for å bli kvitt punktene.
+ *
+ * ```ts
+ * <ul {...list({ variant: "divided" })}>…</ul>
+ * ```
+ */
+export const list = Object.assign(({ variant = "default" } = {}) => attributes({
+    class: LIST_CLASS,
+    "data-variant": variant === "default" ? undefined : variant,
+}), {
+    variants: listVariants,
+    isVariant: createGuard(listVariants),
+});
+//# sourceMappingURL=list.js.map

package/dist/components/css/list/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../src/components/css/list/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,UAAU,GAAG,SAAkB,CAAA;AAE5C,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,CAAU,CAAA;AAepE;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAC/B,CAAC,EAAE,OAAO,GAAG,SAAS,KAAkB,EAAE,EAAkB,EAAE,CAC5D,UAAU,CAAC;IACT,KAAK,EAAE,UAAU;IACjB,cAAc,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;CAC5D,CAAC,EACJ;IACE,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC;CACrC,CACF,CAAA"}

package/dist/components/css/pagination/pagination.d.ts

@@ -0,0 +1,27 @@
+export declare const PAGINATION_CLASS: "fs-pagination";
+/** Hoppet i nummerrekken, som «1 2 … 9 10». */
+export declare const PAGINATION_GAP_CLASS: "fs-pagination__gap";
+export type PaginationAttributes = {
+    class: typeof PAGINATION_CLASS;
+};
+/**
+ * Attributtene for sidenavigering.
+ *
+ * Klassen hører på en `<ul>` inne i en `<nav aria-label="Sidenavigering">`.
+ * Hver side er en lenke med egen adresse, ikke en knapp: da kan brukeren
+ * åpne side tre i ny fane, og komme tilbake med tilbakeknappen.
+ *
+ * Gjeldende side markeres med `aria-current="page"`, som både gir fargen og
+ * er det skjermleseren leser opp.
+ *
+ * ```ts
+ * <nav aria-label="Sidenavigering">
+ *   <ul {...pagination()}>…</ul>
+ * </nav>
+ * ```
+ */
+export declare const pagination: (() => PaginationAttributes) & {
+    /** Klassen på hoppet i nummerrekken. */
+    gap: "fs-pagination__gap";
+};
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/css/pagination/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/css/pagination/pagination.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,EAAG,eAAwB,CAAA;AACxD,+CAA+C;AAC/C,eAAO,MAAM,oBAAoB,EAAG,oBAA6B,CAAA;AAEjE,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,OAAO,gBAAgB,CAAA;CAC/B,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,SACjB,oBAAoB;IAEtB,wCAAwC;;CAG3C,CAAA"}

package/dist/components/css/pagination/pagination.js

@@ -0,0 +1,25 @@
+import { attributes } from "../shared.js";
+export const PAGINATION_CLASS = "fs-pagination";
+/** Hoppet i nummerrekken, som «1 2 … 9 10». */
+export const PAGINATION_GAP_CLASS = "fs-pagination__gap";
+/**
+ * Attributtene for sidenavigering.
+ *
+ * Klassen hører på en `<ul>` inne i en `<nav aria-label="Sidenavigering">`.
+ * Hver side er en lenke med egen adresse, ikke en knapp: da kan brukeren
+ * åpne side tre i ny fane, og komme tilbake med tilbakeknappen.
+ *
+ * Gjeldende side markeres med `aria-current="page"`, som både gir fargen og
+ * er det skjermleseren leser opp.
+ *
+ * ```ts
+ * <nav aria-label="Sidenavigering">
+ *   <ul {...pagination()}>…</ul>
+ * </nav>
+ * ```
+ */
+export const pagination = Object.assign(() => attributes({ class: PAGINATION_CLASS }), {
+    /** Klassen på hoppet i nummerrekken. */
+    gap: PAGINATION_GAP_CLASS,
+});
+//# sourceMappingURL=pagination.js.map