@fristil/designsystem 0.5.1 → 0.5.3

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,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"}
+{"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;AAO1D,OAAO,EACL,cAAc,EACd,MAAM,EACN,aAAa,GACd,MAAM,mCAAmC,CAAA;AAC1C,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/react.d.ts

@@ -137,9 +137,11 @@ export declare const fs: {
         states: readonly ["default", "invalid", "success"];
         isState: (value: string) => value is "default" | "success" | "invalid";
     };
-    readonly select: ((options?: import("./index.js").SelectOptions | undefined) => ReactAttributes<import("./index.js").SelectAttributes>) & (({ state }?: import("./index.js").SelectOptions) => import("./index.js").SelectAttributes) & {
+    readonly select: ((options?: import("./index.js").SelectOptions | undefined) => ReactAttributes<import("./index.js").SelectAttributes>) & (({ state, picker, }?: import("./index.js").SelectOptions) => import("./index.js").SelectAttributes) & {
         states: readonly ["default", "invalid", "success"];
         isState: (value: string) => value is "default" | "success" | "invalid";
+        pickers: readonly ["auto", "styled"];
+        isPicker: (value: string) => value is "auto" | "styled";
     };
     readonly skeleton: ((options?: import("./index.js").SkeletonOptions | undefined) => ReactAttributes<import("./index.js").SkeletonAttributes>) & (({ variant }?: import("./index.js").SkeletonOptions) => import("./index.js").SkeletonAttributes) & {
         variants: readonly ["block", "text", "circle"];
@@ -306,6 +308,8 @@ export declare const fs: {
         }>[];
         empty: ReactAttributes<{
             class: "fs-suggestion__empty";
+            hidden: true | undefined;
+            "data-preserve-attr": "hidden";
         }>;
         status: ReactAttributes<{
             class: "fs-sr-only";

package/dist/react.d.ts.map

@@ -1 +1 @@
-{"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,SAAS,cAAc,GACtB,cAAc,GACd,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACnB,CAAA;AAqBD,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;;;;;;;;;;8BAlJjB,CAAC;0BACR,CAAA;wBAAyB,CAAC;oBAAwB,CAAC;;;;;;;kBACF,CAAC;;;;IAqJvD;;;;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"}
+{"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,SAAS,cAAc,GACtB,cAAc,GACd,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACnB,CAAA;AAqBD,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;;;;;;;;;;8BAlJjB,CAAC;0BACR,CAAA;wBAAyB,CAAC;oBAAwB,CAAC;;;;;;;kBACF,CAAC;;;;IAqJvD;;;;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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fristil/designsystem",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Rammeverksuavhengig designsystem: tokens, CSS-komponenter og web components.",
   "license": "MIT",
   "author": "MarkusAugust",
@@ -196,6 +196,10 @@
       "types": "./dist/dom.d.ts",
       "import": "./dist/dom.js"
     },
+    "./host-element": {
+      "types": "./dist/components/host-element.d.ts",
+      "import": "./dist/components/host-element.js"
+    },
     "./table.css": "./src/components/css/table/table.css",
     "./table": {
       "types": "./dist/components/css/table/table.d.ts",
@@ -297,11 +301,12 @@
   },
   "scripts": {
     "generate": "bun scripts/generate-tokens.ts",
-    "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",
+    "build": "bun run generate && rm -rf dist && tsc -b --force && bun run sjekk:eksport && bun run sjekk:server && 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",
     "sjekk:eksport": "bun scripts/sjekk-eksport.ts",
+    "sjekk:server": "bun scripts/sjekk-server-import.ts",
     "sjekk:tailwind": "bun scripts/sjekk-tailwind.ts",
     "nettlesere": "playwright install chromium firefox webkit",
     "tema": "bun src/cli.ts",

package/src/components/css/select/select.css

@@ -7,8 +7,8 @@
 
     display: block;
     width: 100%;
-    padding: var(--size-2) calc(var(--size-4) + var(--size-2)) var(--size-2)
-      var(--size-3);
+    padding-block: var(--size-2);
+    padding-inline: var(--size-3) calc(var(--size-4) + var(--size-2));
     font-family: inherit;
     font-size: var(--font-size-m);
     line-height: 1.5;
@@ -37,6 +37,15 @@
     background-repeat: no-repeat;
   }
 
+  /* Pila er to gradienter, og `background-position` har ingen logisk
+     variant. Speilvendingen er de samme to bitene, flyttet til venstre kant
+     og byttet om: den som lå ytterst ligger nå innerst. */
+  .fs-select:dir(rtl) {
+    background-position:
+      calc(0.75rem - 0.35rem) calc(50% - 0.1rem),
+      calc(1rem - 0.35rem) calc(50% - 0.1rem);
+  }
+
   .fs-select:hover {
     border-color: var(--semantic-field-border-hover);
   }
@@ -83,13 +92,192 @@
     outline-color: var(--semantic-success-foreground);
   }
 
+  /*
+   * Nedtrekkslista er et vindu fra operativsystemet, og ingen CSS når inn i
+   * den. `appearance: base-select` ber nettleseren tegne den inne i siden i
+   * stedet: `::picker(select)` blir et vanlig element, og hvert `<option>`
+   * kan få systemets egne farger og avstander.
+   *
+   * Det er valgfritt, og slås på med `data-picker="styled"`. Firefox 150 har
+   * det ikke, og der beholder feltet nettleserens egen liste. Det er den
+   * samme komponenten med to utseender, ikke noe som går i stykker.
+   */
+  @supports (appearance: base-select) {
+    .fs-select[data-picker="styled"],
+    .fs-select[data-picker="styled"]::picker(select) {
+      appearance: base-select;
+    }
+
+    /* Knappen tegner nå sin egen pil med `::picker-icon`, så gradientene skal
+       bort. Pila tar ekte plass i oppsettet, og plassen vi holdt av til den
+       tegnede pila ville da blitt liggende dobbelt. */
+    .fs-select[data-picker="styled"] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--size-2);
+      background-image: none;
+      padding-inline: var(--size-3);
+    }
+
+    /* Teksten i knappen er valget som står nå. Lange valg skal klippes, ikke
+       skyve pila ut av feltet. Uten `min-inline-size: 0` krymper den ikke,
+       for flex gir den minstebredden til innholdet. */
+    /* biome-ignore lint/correctness/noUnknownTypeSelector: <selectedcontent> er
+       elementet nettleseren lager for det valgte alternativet i en tilpassbar
+       nedtrekksliste. Biome kjenner det ennå ikke. */
+    .fs-select[data-picker="styled"] selectedcontent {
+      min-inline-size: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .fs-select[data-picker="styled"]::picker-icon {
+      color: var(--semantic-muted-foreground);
+      transition: rotate 120ms ease;
+    }
+
+    .fs-select[data-picker="styled"]:open::picker-icon {
+      rotate: 180deg;
+    }
+
+    .fs-select[data-picker="styled"]::picker(select) {
+      box-sizing: border-box;
+      min-inline-size: anchor-size(self-inline);
+      /* Lista skal fylle plassen som faktisk er igjen ned til kanten av
+         vinduet, ikke strekke seg utenfor den. `stretch` er nettopp den
+         plassen, og margen trekkes fra. */
+      max-block-size: stretch;
+      margin-block: var(--fs-select-viewport-margin, var(--size-2));
+      padding: 0;
+      overflow-y: auto;
+      background: var(--semantic-page-background);
+      border: 1px solid var(--semantic-field-border);
+      border-radius: var(--fs-select-radius, var(--size-1));
+      box-shadow: var(--semantic-shadow-overlay);
+      /* Er det ikke plass under feltet, legges lista over det. */
+      position-try-fallbacks: flip-block;
+      opacity: 0;
+      transition:
+        opacity 120ms ease,
+        overlay 120ms allow-discrete,
+        display 120ms allow-discrete;
+    }
+
+    .fs-select[data-picker="styled"]:open::picker(select) {
+      opacity: 1;
+    }
+
+    @starting-style {
+      .fs-select[data-picker="styled"]:open::picker(select) {
+        opacity: 0;
+      }
+    }
+
+    /* Høyden kan bare animeres der `calc-size` finnes, siden `auto` ellers
+       ikke er en verdi det går an å gå til. Uten støtte står høyden på
+       `auto`, og bare gjennomsiktigheten tones. */
+    @supports (block-size: calc-size(auto, size)) {
+      .fs-select[data-picker="styled"]::picker(select) {
+        block-size: 0;
+        transition:
+          opacity 120ms ease,
+          block-size 120ms ease,
+          overlay 120ms allow-discrete,
+          display 120ms allow-discrete;
+      }
+
+      .fs-select[data-picker="styled"]:open::picker(select) {
+        block-size: calc-size(auto, size);
+      }
+
+      @starting-style {
+        .fs-select[data-picker="styled"]:open::picker(select) {
+          block-size: 0;
+        }
+      }
+    }
+
+    /* Gruppeoverskriften er ikke et element vi kan treffe når den kommer fra
+       `label=`, bare fra `<legend>`. Derfor settes den på gruppa, og arves
+       ned: størrelsen og fargen skiller den fra valgene, og `text-indent`
+       gir den samme venstrekant som teksten i et valg. Valgene setter de tre
+       tilbake til sine egne verdier. */
+    .fs-select[data-picker="styled"] optgroup {
+      padding-block: var(--size-2) var(--size-1);
+      font-size: var(--font-size-s);
+      color: var(--semantic-muted-foreground);
+      text-indent: var(--size-3);
+    }
+
+    .fs-select[data-picker="styled"] option {
+      text-indent: 0;
+      display: flex;
+      align-items: center;
+      gap: var(--size-2);
+      padding: var(--fs-select-option-padding, var(--size-2) var(--size-3));
+      font-family: inherit;
+      font-size: var(--font-size-m);
+      line-height: 1.5;
+      color: var(--semantic-page-foreground);
+      background: var(--semantic-page-background);
+      cursor: pointer;
+    }
+
+    /* Haken står etter teksten, ikke foran den, slik at alle valgene får
+       teksten på samme sted. */
+    .fs-select[data-picker="styled"] option::checkmark {
+      order: 1;
+      margin-inline-start: auto;
+    }
+
+    .fs-select[data-picker="styled"] option:hover {
+      background: var(--semantic-interactive-background);
+    }
+
+    .fs-select[data-picker="styled"] option:checked {
+      background: var(--semantic-interactive-main);
+      color: var(--semantic-interactive-contrast);
+    }
+
+    /* Fokus vises med en ramme, ikke med en flate. Piltastene flytter fokus
+       mellom valgene, og det valgte har allerede sin egen flate. En annen
+       bakgrunnsfarge ville derfor forsvunnet nettopp der brukeren står. */
+    .fs-select[data-picker="styled"] option:focus {
+      outline: 2px solid var(--semantic-interactive-main);
+      outline-offset: -2px;
+    }
+
+    .fs-select[data-picker="styled"] option:checked:focus {
+      outline-color: var(--semantic-interactive-contrast);
+    }
+
+    .fs-select[data-picker="styled"] option:disabled {
+      color: var(--semantic-disabled-foreground);
+      background: var(--semantic-disabled-background);
+      cursor: not-allowed;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .fs-select[data-picker="styled"]::picker(select),
+      .fs-select[data-picker="styled"]::picker-icon {
+        transition: none;
+      }
+    }
+  }
+
   /* Høykontrast: pilen er to gradienter, og de fjernes i modusen. Da er
-     nettleserens egen pil bedre enn ingen. */
+     nettleserens egen pil bedre enn ingen. Lista som tegnes i siden
+     faller tilbake av samme grunn: nettleserens egen liste bruker systemfargene, og de er
+     de eneste som er garantert lesbare i modusen. */
   @media (forced-colors: active) {
-    .fs-select {
+    .fs-select,
+    .fs-select[data-picker="styled"] {
+      display: block;
       appearance: auto;
       background-image: none;
-      padding-inline-end: var(--size-3);
+      padding-inline: var(--size-3);
     }
   }
 }

package/src/components/css/select/select.ts

@@ -1,5 +1,6 @@
 import {
   attributes,
+  createGuard,
   type FieldState,
   fieldStates,
   isFieldState,
@@ -8,14 +9,29 @@ import {
 
 export const SELECT_CLASS = "fs-select" as const
 
+/**
+ * Hvem som tegner nedtrekkslista.
+ *
+ * `auto` er nettleserens egen liste, et vindu fra operativsystemet som ikke
+ * kan styles. `styled` ber nettleseren tegne den inne i siden i stedet, slik
+ * at den får designsystemets farger, avstander og skygge.
+ */
+export const selectPickers = ["auto", "styled"] as const
+export type SelectPicker = (typeof selectPickers)[number]
+export type NonDefaultSelectPicker = Exclude<SelectPicker, "auto">
+export const isSelectPicker = createGuard(selectPickers)
+
 export type SelectOptions = {
   /** Valideringstilstand. Standard: `default`. */
   state?: FieldState
+  /** Hvem som tegner nedtrekkslista. Standard: `auto`. */
+  picker?: SelectPicker
 }
 
 export type SelectAttributes = {
   class: typeof SELECT_CLASS
   "data-state"?: NonDefaultFieldState
+  "data-picker"?: NonDefaultSelectPicker
   "aria-invalid"?: "true"
 }
 
@@ -24,17 +40,24 @@ export type SelectAttributes = {
  *
  * ```ts
  * <select {...select({ state: "invalid" })} />
+ * <select {...select({ picker: "styled" })} />
  * ```
  */
 export const select = Object.assign(
-  ({ state = "default" }: SelectOptions = {}): SelectAttributes =>
+  ({
+    state = "default",
+    picker = "auto",
+  }: SelectOptions = {}): SelectAttributes =>
     attributes({
       class: SELECT_CLASS,
       "data-state": state === "default" ? undefined : state,
+      "data-picker": picker === "auto" ? undefined : picker,
       "aria-invalid": state === "invalid" ? ("true" as const) : undefined,
     }),
   {
     states: fieldStates,
     isState: isFieldState,
+    pickers: selectPickers,
+    isPicker: isSelectPicker,
   },
 )

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

@@ -1,3 +1,4 @@
+import { defineElement, HostElement } from "../../host-element.js"
 import {
   CONNECTION_STATUS_BAR_CLASS,
   CONNECTION_STATUS_CLASS,
@@ -36,7 +37,7 @@ const KVITTERING_MS = 4000
  * }
  * ```
  */
-export class FsConnectionStatus extends HTMLElement {
+export class FsConnectionStatus extends HostElement {
   static observedAttributes = ["offline-text", "online-text"]
 
   private bar?: HTMLElement
@@ -138,7 +139,5 @@ declare global {
 export function defineFsConnectionStatus(
   tagName = FS_CONNECTION_STATUS_TAG,
 ): void {
-  if (!customElements.get(tagName)) {
-    customElements.define(tagName, FsConnectionStatus)
-  }
+  defineElement(tagName, FsConnectionStatus)
 }

package/src/components/frittstaende/session-timeout/fs-session-timeout.ts

@@ -1,3 +1,4 @@
+import { defineElement, HostElement } from "../../host-element.js"
 import {
   SESSION_TIMEOUT_CLASS,
   SESSION_TIMEOUT_DIALOG_CLASS,
@@ -47,7 +48,7 @@ function ord(sekunder: number): string {
  *   .addEventListener("session-extend", () => fetch("/forleng", { method: "POST" }))
  * ```
  */
-export class FsSessionTimeout extends HTMLElement {
+export class FsSessionTimeout extends HostElement {
   static observedAttributes = ["warn-at", "expires-at"]
 
   private dialog?: HTMLDialogElement
@@ -210,7 +211,5 @@ declare global {
 }
 
 export function defineFsSessionTimeout(tagName = FS_SESSION_TIMEOUT_TAG): void {
-  if (!customElements.get(tagName)) {
-    customElements.define(tagName, FsSessionTimeout)
-  }
+  defineElement(tagName, FsSessionTimeout)
 }

package/src/components/frittstaende/toast/fs-toast.ts

@@ -1,3 +1,4 @@
+import { defineElement, HostElement } from "../../host-element.js"
 import { TOAST_CLASS, TOAST_CLOSE_CLASS } from "./toast.js"
 
 export const FS_TOAST_TAG = "fs-toast" as const
@@ -43,7 +44,7 @@ export type ShowOptions = {
  * })
  * ```
  */
-export class FsToast extends HTMLElement {
+export class FsToast extends HostElement {
   static observedAttributes = ["duration", "label"]
 
   /** Standard levetid i millisekunder. `0` lar meldingene bli stående. */
@@ -149,7 +150,5 @@ declare global {
 }
 
 export function defineFsToast(tagName = FS_TOAST_TAG): void {
-  if (!customElements.get(tagName)) {
-    customElements.define(tagName, FsToast)
-  }
+  defineElement(tagName, FsToast)
 }

package/src/components/host-element.ts

@@ -0,0 +1,34 @@
+/**
+ * Grunnlaget web-komponentene arver fra, og registreringen av dem.
+ *
+ * `HTMLElement` og `customElements` finnes bare i nettleseren. En
+ * `class X extends HTMLElement` blir evaluert i det modulen lastes, så en
+ * server som bare ville hente `fs.button()` fra pakken stoppet med
+ * «HTMLElement is not defined» før den kom så langt. Det rammet ni av
+ * inngangspunktene, hovedinngangen inkludert, og gjorde pakken ubrukelig i
+ * nettopp den situasjonen den er bygd for: at serveren skriver markupen.
+ *
+ * Reserven er en tom klasse. Den blir aldri brukt til noe, for uten
+ * `customElements` blir ingenting registrert, og uten registrering lager
+ * nettleseren aldri en forekomst. Den finnes bare for at modulen skal kunne
+ * lastes.
+ */
+export const HostElement =
+  typeof HTMLElement === "undefined"
+    ? (class {} as unknown as typeof HTMLElement)
+    : HTMLElement
+
+/**
+ * Registrerer et egendefinert element, én gang, og bare i nettleseren.
+ *
+ * Kalles `defineFs*` fra en modul som også kjøres på serveren, som i
+ * TanStack Start eller en React-app med server-rendring, skal det ikke skje
+ * noe. Der finnes det ingen `customElements` å registrere i.
+ */
+export function defineElement(
+  tagName: string,
+  element: CustomElementConstructor,
+): void {
+  if (typeof customElements === "undefined") return
+  if (!customElements.get(tagName)) customElements.define(tagName, element)
+}

package/src/components/ramme/error-summary/fs-error-summary.ts

@@ -1,3 +1,4 @@
+import { defineElement, HostElement } from "../../host-element.js"
 export const FS_ERROR_SUMMARY_TAG = "fs-error-summary" as const
 
 /**
@@ -24,7 +25,7 @@ export const FS_ERROR_SUMMARY_TAG = "fs-error-summary" as const
  * </fs-error-summary>
  * ```
  */
-export class FsErrorSummary extends HTMLElement {
+export class FsErrorSummary extends HostElement {
   static observedAttributes = ["autofocus", "hidden"]
 
   private hasFocused = false
@@ -77,9 +78,19 @@ export class FsErrorSummary extends HTMLElement {
       this.links.add(link)
     }
 
-    // Boksen er skjult av serveren når lista er tom. Er den synlig nå, og vi
-    // ikke har flyttet fokus hit ennå, er det denne innsendingen som feilet.
-    if (this.shouldFocus && !this.hasFocused && !this.hidden) {
+    // Skjuler serveren boksen igjen, er den innsendingen over. Uten denne
+    // nullstillingen tok boksen fokus bare første gang: mønsteret i en
+    // Datastar-app er at lista står med de samme lenkene hele veien og bare
+    // `hidden` slås av og på, så «har jeg flyttet fokus hit før» er ikke et
+    // svar på om dette er en ny innsending.
+    if (this.hidden) {
+      this.hasFocused = false
+      return
+    }
+
+    // Er boksen synlig nå, og vi ikke har flyttet fokus hit ennå, er det
+    // denne innsendingen som feilet.
+    if (this.shouldFocus && !this.hasFocused) {
       this.hasFocused = true
       this.focus()
     }
@@ -134,7 +145,5 @@ declare global {
 }
 
 export function defineFsErrorSummary(tagName = FS_ERROR_SUMMARY_TAG): void {
-  if (!customElements.get(tagName)) {
-    customElements.define(tagName, FsErrorSummary)
-  }
+  defineElement(tagName, FsErrorSummary)
 }

package/src/components/ramme/field/field-core.ts

@@ -152,19 +152,28 @@ export function computeFieldAttributes(
  * lister på de to andre forsvinner klassen og feilmeldingen ved neste
  * morfing, som er nøyaktig den feilen kontrakten skal hindre.
  *
+ * Hjelpeteksten og feilmeldingen må ha `id` med i lista selv om malen ikke
+ * skriver noen. Komponenten lager dem i så fall selv, og `aria-describedby`
+ * på kontrollen peker på dem. Forsvinner id-en i en morfing, peker
+ * koblingen på noe som ikke finnes, og skjermleseren leser verken
+ * hjelpeteksten eller feilen. `for` på ledeteksten er der av samme grunn.
+ *
  * ```html
- * <label class="fs-label" for="epost"
- *        data-preserve-attr="class data-required data-optional aria-disabled">E-post</label>
- * <input class="fs-input" id="epost"
+ * <label class="fs-label"
+ *        data-preserve-attr="class for data-required data-optional aria-disabled">E-post</label>
+ * <input class="fs-input"
  *        data-preserve-attr="id aria-describedby aria-invalid data-state disabled aria-disabled">
- * <p class="fs-error-text" hidden data-preserve-attr="hidden">Skriv en gyldig adresse.</p>
+ * <p class="fs-help-text" data-preserve-attr="id">Vi sender aldri spam.</p>
+ * <p class="fs-error-text" hidden data-preserve-attr="id hidden">Skriv en gyldig adresse.</p>
  * ```
  */
 export const FIELD_PRESERVED_ATTRIBUTES = {
   /** På ledeteksten. */
-  label: "class data-required data-optional aria-disabled",
+  label: "class for data-required data-optional aria-disabled",
   /** På selve kontrollen. */
   control: "id aria-describedby aria-invalid data-state disabled aria-disabled",
+  /** På hjelpeteksten. */
+  help: "id",
   /** På feilmeldingen. */
-  error: "hidden",
+  error: "id hidden",
 } as const

package/src/components/ramme/field/fs-field.ts

@@ -1,3 +1,4 @@
+import { defineElement, HostElement } from "../../host-element.js"
 import { computeFieldAttributes } from "./field-core.js"
 
 export const FS_FIELD_TAG = "fs-field" as const
@@ -31,7 +32,7 @@ function setOrRemove(
  * det ved hver patch. Se `FIELD_PRESERVED_ATTRIBUTES` for hva serveren må
  * skrive for at koblingen skal overleve en morfing.
  */
-export class FsField extends HTMLElement {
+export class FsField extends HostElement {
   static observedAttributes = [
     "invalid",
     "disabled",
@@ -232,7 +233,5 @@ declare global {
 }
 
 export function defineFsField(tagName = FS_FIELD_TAG): void {
-  if (!customElements.get(tagName)) {
-    customElements.define(tagName, FsField)
-  }
+  defineElement(tagName, FsField)
 }

package/src/components/ramme/popover/fs-popover.ts

@@ -1,3 +1,4 @@
+import { defineElement, HostElement } from "../../host-element.js"
 export const FS_POPOVER_TAG = "fs-popover" as const
 
 type Placement = "bottom-start" | "bottom-end" | "top-start" | "top-end"
@@ -32,7 +33,7 @@ const PLACEMENTS: readonly Placement[] = [
  * </fs-popover>
  * ```
  */
-export class FsPopover extends HTMLElement {
+export class FsPopover extends HostElement {
   static observedAttributes = ["open", "placement"]
 
   private panel?: HTMLElement
@@ -205,7 +206,5 @@ declare global {
 }
 
 export function defineFsPopover(tagName = FS_POPOVER_TAG): void {
-  if (!customElements.get(tagName)) {
-    customElements.define(tagName, FsPopover)
-  }
+  defineElement(tagName, FsPopover)
 }