@fristil/designsystem 0.3.0 → 0.5.0

package/dist/index.js

@@ -33,15 +33,22 @@ export { tag } from "./components/css/tag/tag.js";
 export { textarea } from "./components/css/textarea/textarea.js";
 export { toggleGroup } from "./components/css/toggle-group/toggle-group.js";
 export { tooltip } from "./components/css/tooltip/tooltip.js";
-export * from "./components/frittstaende/calendar/fs-calendar.js";
-export * from "./components/frittstaende/date-field/fs-date-field.js";
-export * from "./components/frittstaende/suggestion/fs-suggestion.js";
+export * from "./components/frittstaende/connection-status/connection-status.js";
+export * from "./components/frittstaende/connection-status/fs-connection-status.js";
+export * from "./components/frittstaende/session-timeout/fs-session-timeout.js";
+export * from "./components/frittstaende/session-timeout/session-timeout.js";
 export * from "./components/frittstaende/toast/fs-toast.js";
+export * from "./components/frittstaende/toast/toast.js";
+export * from "./components/ramme/error-summary/error-summary.js";
 export * from "./components/ramme/error-summary/fs-error-summary.js";
 export * from "./components/ramme/field/field-core.js";
 export * from "./components/ramme/field/fs-field.js";
 export * from "./components/ramme/popover/fs-popover.js";
+export * from "./components/ramme/popover/popover.js";
+export * from "./components/ramme/suggestion/fs-suggestion.js";
+export * from "./components/ramme/suggestion/suggestion.js";
 export * from "./components/ramme/tabs/fs-tabs.js";
+export * from "./components/ramme/tabs/tabs.js";
 export { setAttributes } from "./dom.js";
 export { fs } from "./fs.js";
 export * from "./tokens/tokens.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAA;AAMnE,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAOvD,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAM1D,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAA;AAMzE,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAM1D,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAKpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAEhE,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAM1D,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAA;AAM7D,OAAO,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAA;AAOrE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAA;AAKxE,OAAO,EAAE,UAAU,EAAE,MAAM,6CAA6C,CAAA;AAMxE,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAA;AAM7D,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAA;AAMlE,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAKvD,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAEvD,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAMpD,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAA;AAOtE,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAA;AAKnE,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAKvD,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAK1D,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAC1D,cAAc,4BAA4B,CAAA;AAM1C,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAA;AAMlE,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAA;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAA;AAK5D,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAA;AAMjE,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAMvD,OAAO,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAA;AAKjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAA;AAE3E,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAA;AAC7D,cAAc,mDAAmD,CAAA;AACjE,cAAc,uDAAuD,CAAA;AACrE,cAAc,uDAAuD,CAAA;AACrE,cAAc,6CAA6C,CAAA;AAC3D,cAAc,sDAAsD,CAAA;AACpE,cAAc,wCAAwC,CAAA;AACtD,cAAc,sCAAsC,CAAA;AACpD,cAAc,0CAA0C,CAAA;AACxD,cAAc,oCAAoC,CAAA;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAExC,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,cAAc,oBAAoB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAA;AAMnE,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAOvD,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAM1D,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAA;AAMzE,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAM1D,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAKpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAEhE,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAM1D,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAA;AAM7D,OAAO,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAA;AAOrE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAA;AAKxE,OAAO,EAAE,UAAU,EAAE,MAAM,6CAA6C,CAAA;AAMxE,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAA;AAM7D,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAA;AAMlE,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAKvD,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAEvD,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAMpD,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAA;AAOtE,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAA;AAKnE,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAKvD,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAK1D,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAC1D,cAAc,4BAA4B,CAAA;AAM1C,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAA;AAMlE,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAA;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAA;AAK5D,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAA;AAMjE,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAMvD,OAAO,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAA;AAKjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAA;AAE3E,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAA;AAC7D,cAAc,kEAAkE,CAAA;AAChF,cAAc,qEAAqE,CAAA;AACnF,cAAc,iEAAiE,CAAA;AAC/E,cAAc,8DAA8D,CAAA;AAC5E,cAAc,6CAA6C,CAAA;AAC3D,cAAc,0CAA0C,CAAA;AACxD,cAAc,mDAAmD,CAAA;AACjE,cAAc,sDAAsD,CAAA;AACpE,cAAc,wCAAwC,CAAA;AACtD,cAAc,sCAAsC,CAAA;AACpD,cAAc,0CAA0C,CAAA;AACxD,cAAc,uCAAuC,CAAA;AACrD,cAAc,gDAAgD,CAAA;AAC9D,cAAc,6CAA6C,CAAA;AAC3D,cAAc,oCAAoC,CAAA;AAClD,cAAc,iCAAiC,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAExC,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,cAAc,oBAAoB,CAAA"}

package/dist/jsx/react.d.ts

@@ -47,68 +47,53 @@ type FsFieldAttributes = HTMLAttributes<HTMLElement> & {
     "control-id"?: string;
     "described-by"?: string;
 };
-type FsTabsAttributes = HTMLAttributes<HTMLElement> & {
-    /** Indeksen på fanen som er valgt. */
-    selected?: number;
-    /** Tekst som sier hva fanene velger mellom. */
-    label?: string;
-};
+/**
+ * `<fs-tabs>` har ingen attributter.
+ *
+ * Hvilken fane som er valgt står i markupen serveren sendte, som
+ * `aria-selected` på fanen og `hidden` på panelene. Komponenten leser det
+ * derfra i stedet for å ha sin egen `selected`, slik at de to aldri kan si
+ * hver sin ting.
+ */
+type FsTabsAttributes = HTMLAttributes<HTMLElement>;
 type FsErrorSummaryAttributes = HTMLAttributes<HTMLElement> & {
-    /** Overskriften over lista med feil. */
-    heading?: string;
-    /** Flytt fokus hit når boksen kommer til syne. */
-    autofocus?: Flag;
+    /**
+     * Flytt fokus hit når boksen kommer til syne. Standard: på.
+     * Sett `"false"` for å la være.
+     */
+    autofocus?: "false";
 };
 type FsSuggestionAttributes = HTMLAttributes<HTMLElement> & {
-    label?: string;
-    value?: string;
-    name?: string;
-    placeholder?: string;
-    "help-text"?: string;
-    "error-text"?: string;
-    "control-id"?: string;
-    "described-by"?: string;
-    "no-results-text"?: string;
-    invalid?: Flag;
-    required?: Flag;
-    optional?: Flag;
-    disabled?: Flag;
-    open?: Flag;
+    /**
+     * Slår av filtreringen på klienten. Bruk den når serveren sender lista på
+     * nytt mens brukeren skriver, som i en Datastar-app: da er det serveren som
+     * bestemmer hva som vises.
+     */
+    "server-filtered"?: Flag;
 };
 type FsPopoverAttributes = HTMLAttributes<HTMLElement> & {
     open?: Flag;
     /** Hvilken kant panelet henger fra. */
     placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
 };
+type FsSessionTimeoutAttributes = HTMLAttributes<HTMLElement> & {
+    /** Sekunder uten aktivitet før varselet kommer. */
+    "warn-at"?: number;
+    /** Sekunder uten aktivitet før økten er ute. */
+    "expires-at"?: number;
+};
+type FsConnectionStatusAttributes = HTMLAttributes<HTMLElement> & {
+    /** Teksten når forbindelsen er borte. */
+    "offline-text"?: string;
+    /** Teksten når den kommer tilbake. */
+    "online-text"?: string;
+};
 type FsToastAttributes = HTMLAttributes<HTMLElement> & {
     /** Millisekunder før meldingene forsvinner. */
     duration?: number;
     /** Tekst som sier hva regionen er. */
     label?: string;
 };
-type FsCalendarAttributes = HTMLAttributes<HTMLElement> & {
-    /** Valgt dato som `ÅÅÅÅ-MM-DD`. */
-    value?: string;
-    open?: Flag;
-    disabled?: Flag;
-    "trigger-hidden"?: Flag;
-};
-type FsDateFieldAttributes = HTMLAttributes<HTMLElement> & {
-    label?: string;
-    /** Datoen som `ÅÅÅÅ-MM-DD`, alltid ISO. */
-    value?: string;
-    name?: string;
-    placeholder?: string;
-    "help-text"?: string;
-    "error-text"?: string;
-    "control-id"?: string;
-    "described-by"?: string;
-    invalid?: Flag;
-    required?: Flag;
-    optional?: Flag;
-    disabled?: Flag;
-    readonly?: Flag;
-};
 declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
@@ -117,11 +102,11 @@ declare module "react" {
             "fs-popover": FsPopoverAttributes;
             "fs-suggestion": FsSuggestionAttributes;
             "fs-tabs": FsTabsAttributes;
+            "fs-session-timeout": FsSessionTimeoutAttributes;
+            "fs-connection-status": FsConnectionStatusAttributes;
             "fs-toast": FsToastAttributes;
-            "fs-calendar": FsCalendarAttributes;
-            "fs-date-field": FsDateFieldAttributes;
         }
     }
 }
-export type { FsCalendarAttributes, FsDateFieldAttributes, FsErrorSummaryAttributes, FsFieldAttributes, FsPopoverAttributes, FsSuggestionAttributes, FsTabsAttributes, FsToastAttributes, };
+export type { FsConnectionStatusAttributes, FsErrorSummaryAttributes, FsFieldAttributes, FsPopoverAttributes, FsSessionTimeoutAttributes, FsSuggestionAttributes, FsTabsAttributes, FsToastAttributes, };
 //# sourceMappingURL=react.d.ts.map

package/dist/jsx/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/jsx/react.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/jsx/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;GAmBG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,KAAK,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAE5B,KAAK,iBAAiB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACrD,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED;;;;;;;GAOG;AACH,KAAK,gBAAgB,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAEnD,KAAK,wBAAwB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAC5D;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,KAAK,sBAAsB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAC1D;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,IAAI,CAAA;CACzB,CAAA;AAED,KAAK,mBAAmB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACvD,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,uCAAuC;IACvC,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAA;CACpE,CAAA;AAED,KAAK,0BAA0B,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAC9D,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,KAAK,4BAA4B,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAChE,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,KAAK,iBAAiB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACrD,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,OAAO,QAAQ,OAAO,CAAC;IACrB,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,wBAAwB,CAAA;YAC5C,UAAU,EAAE,iBAAiB,CAAA;YAC7B,YAAY,EAAE,mBAAmB,CAAA;YACjC,eAAe,EAAE,sBAAsB,CAAA;YACvC,SAAS,EAAE,gBAAgB,CAAA;YAC3B,oBAAoB,EAAE,0BAA0B,CAAA;YAChD,sBAAsB,EAAE,4BAA4B,CAAA;YACpD,UAAU,EAAE,iBAAiB,CAAA;SAC9B;KACF;CACF;AAED,YAAY,EACV,4BAA4B,EAC5B,wBAAwB,EACxB,iBAAiB,EACjB,mBAAmB,EACnB,0BAA0B,EAC1B,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,GAClB,CAAA"}

package/dist/react.d.ts

@@ -1,4 +1,9 @@
+import { toast } from "./components/frittstaende/toast/toast.js";
+import { errorSummary } from "./components/ramme/error-summary/error-summary.js";
 import { type FieldOptions } from "./components/ramme/field/field-core.js";
+import { popover } from "./components/ramme/popover/popover.js";
+import { suggestion } from "./components/ramme/suggestion/suggestion.js";
+import { tabs } from "./components/ramme/tabs/tabs.js";
 import { setAttributes } from "./dom.js";
 /**
  * Samme API som `fs`, men med `className` og `htmlFor`.
@@ -24,7 +29,7 @@ import { setAttributes } from "./dom.js";
  */
 /** Gir nøklene navnene React forventer. */
 export type ReactAttributes<T> = {
-    [K in keyof T as K extends "class" ? "className" : K extends "for" ? "htmlFor" : K]: T[K];
+    [K in keyof T as K extends "class" ? "className" : K extends "for" ? "htmlFor" : K extends "tabindex" ? "tabIndex" : K]: T[K];
 };
 export declare function toReactAttributes<T extends Record<string, unknown>>(attributes: T): ReactAttributes<T>;
 export declare const fs: {
@@ -198,6 +203,142 @@ export declare const fs: {
         };
         state: import("./index.js").FieldState;
     };
+    /**
+     * De sammensatte byggerne gir ett attributtsett per element, og hvert sett
+     * må døpes om for seg. `container` har `tabindex`, fanene har både
+     * `tabindex` og `class`.
+     */
+    readonly errorSummary: (options?: Parameters<typeof errorSummary>[0]) => {
+        container: ReactAttributes<{
+            class: typeof import("./index.js").ERROR_SUMMARY_CLASS;
+            role: "alert";
+            tabindex: "-1";
+            id?: string;
+            hidden?: true;
+        }>;
+        title: ReactAttributes<{
+            class: typeof import("./index.js").ERROR_SUMMARY_TITLE_CLASS;
+        }>;
+    };
+    readonly popover: (options: Parameters<typeof popover>[0]) => {
+        host: {
+            open?: "";
+            "data-preserve-attr": "open";
+        };
+        trigger: ReactAttributes<{
+            slot: "trigger";
+            "aria-expanded": "true" | "false";
+            "aria-controls": string;
+            "data-preserve-attr": "aria-expanded";
+        }>;
+        panel: ReactAttributes<{
+            class: typeof import("./index.js").POPOVER_CLASS;
+            id: string;
+            popover: "manual";
+            "data-preserve-attr": "style";
+        }>;
+    };
+    readonly tabs: (options: Parameters<typeof tabs>[0]) => {
+        list: ReactAttributes<{
+            class: typeof import("./index.js").TABS_LIST_CLASS;
+            role: "tablist";
+            "aria-label"?: string;
+        }>;
+        tabs: ReactAttributes<{
+            id: string;
+            role: "tab";
+            type: "button";
+            "aria-selected": "true" | "false";
+            "aria-controls": string;
+            tabindex: "0" | "-1";
+            "data-preserve-attr": "aria-selected tabindex";
+        }>[];
+        panels: ReactAttributes<{
+            id: string;
+            class: typeof import("./index.js").TABS_PANEL_CLASS;
+            role: "tabpanel";
+            "aria-labelledby": string;
+            tabindex: "0";
+            hidden?: true;
+            "data-preserve-attr": "hidden";
+        }>[];
+    };
+    readonly suggestion: (options: Parameters<typeof suggestion>[0]) => {
+        label: ReactAttributes<{
+            class: "fs-label";
+            for: string;
+            "data-required"?: import("./index.js").RequiredMarker;
+            "data-optional"?: "";
+            "aria-disabled"?: "true";
+        }>;
+        field: ReactAttributes<{
+            class: "fs-suggestion__field";
+        }>;
+        control: ReactAttributes<{
+            class: "fs-input";
+            type: "text";
+            role: "combobox";
+            autocomplete: "off";
+            "aria-expanded": "true" | "false";
+            "aria-controls": string;
+            "aria-describedby": string;
+            "aria-autocomplete": "list";
+            "aria-activedescendant": string | undefined;
+            "data-preserve-attr": "aria-expanded aria-activedescendant";
+            id: string;
+            "aria-invalid"?: "true";
+            "data-state"?: "invalid";
+            disabled?: true;
+        }>;
+        list: ReactAttributes<{
+            class: "fs-suggestion__list";
+            id: string;
+            role: "listbox";
+            hidden: true | undefined;
+            "data-preserve-attr": "hidden";
+        }>;
+        options: ReactAttributes<{
+            class: "fs-suggestion__option";
+            id: string;
+            role: "option";
+            "aria-selected": "true" | "false";
+            "data-preserve-attr": "aria-selected hidden";
+        }>[];
+        empty: ReactAttributes<{
+            class: "fs-suggestion__empty";
+        }>;
+        status: ReactAttributes<{
+            class: "fs-sr-only";
+            id: string;
+            role: "status";
+            "aria-live": "polite";
+            "data-ignore-morph": "";
+        }>;
+        help: {
+            id: string;
+        };
+        error: {
+            id: string;
+            hidden?: true;
+        };
+        state: "default" | "success" | "invalid";
+    };
+    readonly toast: (options?: Parameters<typeof toast>[0]) => {
+        region: {
+            role: "status";
+            "aria-live": "polite";
+            "aria-label": string;
+            "data-ignore-morph": "";
+        };
+        toast: ReactAttributes<{
+            class: typeof import("./index.js").TOAST_CLASS;
+        }>;
+        close: ReactAttributes<{
+            class: typeof import("./index.js").TOAST_CLOSE_CLASS;
+        }>;
+    };
+    readonly sessionTimeout: ((options?: import("./index.js").SessionTimeoutOptions | undefined) => ReactAttributes<import("./index.js").SessionTimeoutAttributes>) & (({ warnAt, expiresAt, }?: import("./index.js").SessionTimeoutOptions) => import("./index.js").SessionTimeoutAttributes);
+    readonly connectionStatus: ((options?: import("./index.js").ConnectionStatusOptions | undefined) => ReactAttributes<import("./index.js").ConnectionStatusAttributes>) & (({ offlineText, onlineText, }?: import("./index.js").ConnectionStatusOptions) => import("./index.js").ConnectionStatusAttributes);
     readonly setAttributes: typeof setAttributes;
     readonly states: readonly ["default", "invalid", "success"];
     readonly isState: (value: string) => value is "default" | "success" | "invalid";

package/dist/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAwCA,OAAO,EAEL,KAAK,YAAY,EAClB,MAAM,wCAAwC,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAExC;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,2CAA2C;AAC3C,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;KAC9B,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,OAAO,GAC9B,WAAW,GACX,CAAC,SAAS,KAAK,GACb,SAAS,GACT,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACf,CAAA;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,UAAU,EAAE,CAAC,GACZ,eAAe,CAAC,CAAC,CAAC,CAOpB;AAgBD,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqCb;;;;;OAKG;+BACc,YAAY;;;;;;;;;;8BArHjB,CAAC;0BACR,CAAA;wBAAyB,CAAC;oBAAwB,CAAC;;;;;;;kBACF,CAAC;;;;;;;;;CA8H/C,CAAA"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AA0CA,OAAO,EAAE,KAAK,EAAE,MAAM,0CAA0C,CAAA;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,mDAAmD,CAAA;AAChF,OAAO,EAEL,KAAK,YAAY,EAClB,MAAM,wCAAwC,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAA;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,6CAA6C,CAAA;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,iCAAiC,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAExC;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,2CAA2C;AAC3C,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;KAC9B,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,OAAO,GAC9B,WAAW,GACX,CAAC,SAAS,KAAK,GACb,SAAS,GACT,CAAC,SAAS,UAAU,GAClB,UAAU,GACV,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACjB,CAAA;AAeD,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,UAAU,EAAE,CAAC,GACZ,eAAe,CAAC,CAAC,CAAC,CAMpB;AAgBD,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqCb;;;;;OAKG;+BACc,YAAY;;;;;;;;;;8BA1IjB,CAAC;0BACR,CAAA;wBAAyB,CAAC;oBAAwB,CAAC;;;;;;;kBACF,CAAC;;;;IA6IvD;;;;OAIG;sCACqB,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;;gCAQvC,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;6BAShC,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;mCASpB,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAcrC,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;CAkBpC,CAAA"}

package/dist/react.js

@@ -33,13 +33,31 @@ import { tag } from "./components/css/tag/tag.js";
 import { textarea } from "./components/css/textarea/textarea.js";
 import { toggleGroup } from "./components/css/toggle-group/toggle-group.js";
 import { tooltip } from "./components/css/tooltip/tooltip.js";
+import { connectionStatus } from "./components/frittstaende/connection-status/connection-status.js";
+import { sessionTimeout } from "./components/frittstaende/session-timeout/session-timeout.js";
+import { toast } from "./components/frittstaende/toast/toast.js";
+import { errorSummary } from "./components/ramme/error-summary/error-summary.js";
 import { computeFieldAttributes, } from "./components/ramme/field/field-core.js";
+import { popover } from "./components/ramme/popover/popover.js";
+import { suggestion } from "./components/ramme/suggestion/suggestion.js";
+import { tabs } from "./components/ramme/tabs/tabs.js";
 import { setAttributes } from "./dom.js";
+/**
+ * Attributtene som heter noe annet i React.
+ *
+ * `tabindex` kom med de sammensatte byggerne: feiloppsummeringen skal kunne
+ * få fokus, og bare den valgte fanen er en tabbestopp. Uten omdøpingen
+ * advarer React om hver eneste av dem.
+ */
+const NAVN = {
+    class: "className",
+    for: "htmlFor",
+    tabindex: "tabIndex",
+};
 export function toReactAttributes(attributes) {
     const result = {};
     for (const [name, value] of Object.entries(attributes)) {
-        result[name === "class" ? "className" : name === "for" ? "htmlFor" : name] =
-            value;
+        result[NAVN[name] ?? name] = value;
     }
     return result;
 }
@@ -100,6 +118,57 @@ export const fs = {
         const field = computeFieldAttributes(options);
         return { ...field, label: toReactAttributes(field.label) };
     },
+    /**
+     * De sammensatte byggerne gir ett attributtsett per element, og hvert sett
+     * må døpes om for seg. `container` har `tabindex`, fanene har både
+     * `tabindex` og `class`.
+     */
+    errorSummary: (options = {}) => {
+        const boks = errorSummary(options);
+        return {
+            container: toReactAttributes(boks.container),
+            title: toReactAttributes(boks.title),
+        };
+    },
+    popover: (options) => {
+        const boks = popover(options);
+        return {
+            host: boks.host,
+            trigger: toReactAttributes(boks.trigger),
+            panel: toReactAttributes(boks.panel),
+        };
+    },
+    tabs: (options) => {
+        const faner = tabs(options);
+        return {
+            list: toReactAttributes(faner.list),
+            tabs: faner.tabs.map(toReactAttributes),
+            panels: faner.panels.map(toReactAttributes),
+        };
+    },
+    suggestion: (options) => {
+        const forslag = suggestion(options);
+        return {
+            ...forslag,
+            label: toReactAttributes(forslag.label),
+            field: toReactAttributes(forslag.field),
+            control: toReactAttributes(forslag.control),
+            list: toReactAttributes(forslag.list),
+            options: forslag.options.map(toReactAttributes),
+            empty: toReactAttributes(forslag.empty),
+            status: toReactAttributes(forslag.status),
+        };
+    },
+    toast: (options = {}) => {
+        const varsler = toast(options);
+        return {
+            region: varsler.region,
+            toast: toReactAttributes(varsler.toast),
+            close: toReactAttributes(varsler.close),
+        };
+    },
+    sessionTimeout: forReact(sessionTimeout),
+    connectionStatus: forReact(connectionStatus),
     setAttributes,
     states: fieldStates,
     isState: isFieldState,

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fristil/designsystem",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Rammeverksuavhengig designsystem: tokens, CSS-komponenter og web components.",
   "license": "MIT",
   "author": "MarkusAugust",
@@ -20,7 +20,6 @@
     "custom-elements",
     "css",
     "design-tokens",
-    "lit",
     "accessibility",
     "universell-utforming"
   ],
@@ -45,7 +44,7 @@
     "./file-upload.css": "./src/components/css/file-upload/file-upload.css",
     "./popover.css": "./src/components/ramme/popover/popover.css",
     "./toast.css": "./src/components/frittstaende/toast/toast.css",
-    "./suggestion.css": "./src/components/frittstaende/suggestion/suggestion.css",
+    "./suggestion.css": "./src/components/ramme/suggestion/suggestion.css",
     "./checkbox.css": "./src/components/css/checkbox/checkbox.css",
     "./radio.css": "./src/components/css/radio/radio.css",
     "./switch.css": "./src/components/css/switch/switch.css",
@@ -64,7 +63,6 @@
     "./field.css": "./src/components/ramme/field/field.css",
     "./tabs.css": "./src/components/ramme/tabs/tabs.css",
     "./error-summary.css": "./src/components/ramme/error-summary/error-summary.css",
-    "./date-field.css": "./src/components/frittstaende/date-field/date-field.css",
     "./label": {
       "types": "./dist/components/css/label/label.d.ts",
       "import": "./dist/components/css/label/label.js"
@@ -89,10 +87,6 @@
       "types": "./dist/components/css/error-text/error-text.d.ts",
       "import": "./dist/components/css/error-text/error-text.js"
     },
-    "./calendar": {
-      "types": "./dist/components/frittstaende/calendar/fs-calendar.d.ts",
-      "import": "./dist/components/frittstaende/calendar/fs-calendar.js"
-    },
     "./field": {
       "types": "./dist/components/ramme/field/fs-field.d.ts",
       "import": "./dist/components/ramme/field/fs-field.js"
@@ -105,10 +99,6 @@
       "types": "./dist/components/ramme/error-summary/fs-error-summary.d.ts",
       "import": "./dist/components/ramme/error-summary/fs-error-summary.js"
     },
-    "./date-field": {
-      "types": "./dist/components/frittstaende/date-field/fs-date-field.d.ts",
-      "import": "./dist/components/frittstaende/date-field/fs-date-field.js"
-    },
     "./button": {
       "types": "./dist/components/css/button/button.d.ts",
       "import": "./dist/components/css/button/button.js"
@@ -151,8 +141,8 @@
       "import": "./dist/components/frittstaende/toast/fs-toast.js"
     },
     "./suggestion": {
-      "types": "./dist/components/frittstaende/suggestion/fs-suggestion.d.ts",
-      "import": "./dist/components/frittstaende/suggestion/fs-suggestion.js"
+      "types": "./dist/components/ramme/suggestion/fs-suggestion.d.ts",
+      "import": "./dist/components/ramme/suggestion/fs-suggestion.js"
     },
     "./checkbox": {
       "types": "./dist/components/css/checkbox/checkbox.d.ts",
@@ -280,7 +270,17 @@
     "./paragraph": {
       "types": "./dist/components/css/paragraph/paragraph.d.ts",
       "import": "./dist/components/css/paragraph/paragraph.js"
-    }
+    },
+    "./session-timeout": {
+      "types": "./dist/components/frittstaende/session-timeout/fs-session-timeout.d.ts",
+      "import": "./dist/components/frittstaende/session-timeout/fs-session-timeout.js"
+    },
+    "./session-timeout.css": "./src/components/frittstaende/session-timeout/session-timeout.css",
+    "./connection-status": {
+      "types": "./dist/components/frittstaende/connection-status/fs-connection-status.d.ts",
+      "import": "./dist/components/frittstaende/connection-status/fs-connection-status.js"
+    },
+    "./connection-status.css": "./src/components/frittstaende/connection-status/connection-status.css"
   },
   "files": [
     "dist",
@@ -297,7 +297,7 @@
   },
   "scripts": {
     "generate": "bun scripts/generate-tokens.ts",
-    "build": "bun run generate && tsc -b --force && bun run sjekk:eksport && bun run sjekk:cli && bun run sjekk:versjon && bun run sjekk:pakke",
+    "build": "bun run generate && rm -rf dist && tsc -b --force && bun run sjekk:eksport && bun run sjekk:cli && bun run sjekk:versjon && bun run sjekk:pakke",
     "typecheck": "tsc --noEmit",
     "typecheck:tests": "tsc --noEmit -p tsconfig.tests.json",
     "test:browser": "vitest --config vitest.config.ts --run",
@@ -310,21 +310,12 @@
     "sjekk:pakke": "publint",
     "prepublishOnly": "bun run build"
   },
-  "peerDependencies": {
-    "lit": ">=3.0.0"
-  },
-  "peerDependenciesMeta": {
-    "lit": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@types/node": "24.12.4",
     "@types/react": "19",
     "@vitest/browser": "4.1.7",
     "@vitest/browser-playwright": "^4.1.7",
     "axe-core": "^4.13.0",
-    "lit": "3.3.3",
     "playwright": "1.60.0",
     "publint": "^0.3.24",
     "tailwindcss": "4.3.0",

package/src/components/frittstaende/connection-status/connection-status.css

@@ -0,0 +1,33 @@
+@layer fristil {
+  fs-connection-status {
+    display: contents;
+  }
+
+  .fs-connection-status__bar {
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline: 0;
+    z-index: var(--fs-connection-status-layer, 1000);
+    padding: var(--fs-connection-status-padding, var(--size-2) var(--size-4));
+    font-size: var(--font-size-s);
+    line-height: 1.4;
+    text-align: center;
+    color: var(--semantic-danger-foreground);
+    background: var(--semantic-danger-background);
+    border-block-end: 1px solid var(--semantic-danger-foreground);
+  }
+
+  .fs-connection-status__bar[data-state="online"] {
+    color: var(--semantic-success-foreground);
+    background: var(--semantic-success-background);
+    border-block-end-color: var(--semantic-success-foreground);
+  }
+
+  /* Høykontrastmodus fjerner egne farger og bakgrunner. Uten en ramme ville
+     linja vært usynlig, og det er nettopp den som sier at noe er galt. */
+  @media (forced-colors: active) {
+    .fs-connection-status__bar {
+      border: 2px solid CanvasText;
+    }
+  }
+}

package/src/components/frittstaende/connection-status/connection-status.ts

@@ -0,0 +1,41 @@
+import { attributes } from "../../css/shared.js"
+
+export const CONNECTION_STATUS_CLASS = "fs-connection-status" as const
+export const CONNECTION_STATUS_BAR_CLASS = "fs-connection-status__bar" as const
+
+export type ConnectionStatusOptions = {
+  /** Teksten når forbindelsen er borte. */
+  offlineText?: string
+  /** Teksten når den kommer tilbake. Vises en kort stund. */
+  onlineText?: string
+}
+
+export type ConnectionStatusAttributes = {
+  class: typeof CONNECTION_STATUS_CLASS
+  "offline-text"?: string
+  "online-text"?: string
+  "data-ignore-morph": ""
+}
+
+/**
+ * Attributtene for linja som sier fra at forbindelsen er borte.
+ *
+ * Serveren kan per definisjon ikke fortelle deg at den er utilgjengelig. Er
+ * den nede, kommer det ingenting derfra å rendre. Derfor eier komponenten
+ * alt innholdet, og `data-ignore-morph` hindrer at en senere patch river det
+ * bort i det øyeblikket forbindelsen er tilbake.
+ *
+ * ```ts
+ * <fs-connection-status {...fs.connectionStatus()} />
+ * ```
+ */
+export const connectionStatus = ({
+  offlineText,
+  onlineText,
+}: ConnectionStatusOptions = {}): ConnectionStatusAttributes =>
+  attributes({
+    class: CONNECTION_STATUS_CLASS,
+    "offline-text": offlineText,
+    "online-text": onlineText,
+    "data-ignore-morph": "" as const,
+  })