@fristil/designsystem 0.2.0

package/dist/tokens/tokens.js

@@ -0,0 +1,238 @@
+export const Breakpoints = {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+};
+export const Containers = {
+    xs: "100%",
+    sm: "576px",
+    md: "960px",
+    lg: "1152px",
+    xl: "1536px",
+    aside: "384px",
+    asideNarrow: "288px",
+    wideContent: "768px",
+};
+export const cssTokens = {
+    // Font sizes
+    "--font-size-reference": "16px",
+    "--font-size-xxs": "0.625rem",
+    "--font-size-xs": "0.75rem",
+    "--font-size-s": "0.875rem",
+    "--font-size-m": "1rem",
+    "--font-size-l": "1.125rem",
+    "--font-size-xl": "1.375rem",
+    "--font-size-xxl": "1.875rem",
+    "--font-size-mega": "2.625rem",
+    // Size scale (Tailwind-kompatibel, 4px-base)
+    "--size-px": "1px",
+    "--size-0-5": "0.125rem",
+    "--size-1": "0.25rem",
+    "--size-2": "0.5rem",
+    "--size-3": "0.75rem",
+    "--size-4": "1rem",
+    "--size-5": "1.25rem",
+    "--size-6": "1.5rem",
+    "--size-7": "1.75rem",
+    "--size-8": "2rem",
+    "--size-10": "2.5rem",
+    "--size-12": "3rem",
+    "--size-16": "4rem",
+    // Semantic: størrelse og avstand
+    "--semantic-size-default": "var(--size-4)",
+    "--semantic-spacing-default": "var(--size-4)",
+    // Palette: Burgundy
+    "--palette-burgundy-5": "#faf0f3",
+    "--palette-burgundy-10": "#f7e2e8",
+    "--palette-burgundy-30": "#f3a7b0",
+    "--palette-burgundy-50": "#f06674",
+    "--palette-burgundy-70": "#b04c5c",
+    "--palette-burgundy-100": "#6f2c3f",
+    // Palette: Forest
+    "--palette-forest-5": "#f4faf5",
+    "--palette-forest-10": "#e3f5ea",
+    "--palette-forest-30": "#b9e1c8",
+    "--palette-forest-50": "#91d6ac",
+    "--palette-forest-70": "#5d9b73",
+    "--palette-forest-100": "#2b6940",
+    // Palette: Ochre
+    "--palette-ochre-5": "#f9f4f0",
+    "--palette-ochre-10": "#f9ede2",
+    "--palette-ochre-30": "#f0d2b6",
+    "--palette-ochre-50": "#e7b78a",
+    "--palette-ochre-70": "#a9805b",
+    "--palette-ochre-100": "#6b492c",
+    // Palette: Denim
+    "--palette-denim-5": "#eff3f9",
+    "--palette-denim-10": "#e2eaf7",
+    "--palette-denim-30": "#b5cbee",
+    "--palette-denim-50": "#89abe5",
+    "--palette-denim-70": "#5a77a8",
+    "--palette-denim-100": "#2c436b",
+    // Palette: Azure
+    "--palette-azure-10": "#cde1f9",
+    "--palette-azure-30": "#9ccff2",
+    "--palette-azure-70": "#1362ae",
+    "--palette-azure-100": "#093e61",
+    // Palette: Graphite
+    "--palette-graphite-0": "#ffffff",
+    "--palette-graphite-5": "#f4f4f4",
+    "--palette-graphite-10": "#e5e5e5",
+    "--palette-graphite-30": "#b2b2b2",
+    "--palette-graphite-50": "#757575",
+    "--palette-graphite-70": "#4d4d4d",
+    "--palette-graphite-100": "#1a1a1a",
+    // Palette: Alpha
+    "--palette-dark-alpha-50": "#1a1a1a80",
+    // Semantic: side
+    "--semantic-page-background": "var(--palette-graphite-0)",
+    "--semantic-page-foreground": "var(--palette-graphite-100)",
+    // Semantic: status
+    "--semantic-danger-background": "var(--palette-burgundy-10)",
+    "--semantic-danger-foreground": "#a82e39",
+    "--semantic-warning-background": "var(--palette-ochre-10)",
+    "--semantic-warning-foreground": "#896508",
+    "--semantic-success-background": "var(--palette-forest-10)",
+    "--semantic-success-foreground": "#316f2a",
+    /**
+     * Deaktiverte kontroller. WCAG 1.4.3 unntar inaktive komponenter fra
+     * kontrastkravet, men teksten bør fortsatt kunne leses, siden et avslått
+     * felt ofte viser innhold brukeren trenger. Bruk den bare på noe som faktisk er
+     * slått av; dempet tekst som skal leses bruker `muted-foreground`.
+     */
+    "--semantic-disabled-background": "var(--palette-graphite-10)",
+    "--semantic-disabled-foreground": "var(--palette-graphite-50)",
+    /**
+     * Dempet tekst som likevel skal leses: hjelpetekst, plassholdere,
+     * «(valgfri)»-markeringen, ukedagene i kalenderen. Holder 4,5:1 mot
+     * sideflaten i begge temaer.
+     */
+    "--semantic-muted-foreground": "var(--palette-graphite-50)",
+    // Nøytral status: informasjon brukeren skal lese, ikke en avslått
+    // kontroll. Derfor mørkere enn disabled: 6,71:1 mot egen bakgrunn.
+    "--semantic-neutral-background": "var(--palette-graphite-10)",
+    "--semantic-neutral-foreground": "var(--palette-graphite-70)",
+    // Semantic: interaktiv
+    "--semantic-interactive-background": "var(--palette-azure-10)",
+    "--semantic-interactive-main": "var(--palette-azure-70)",
+    "--semantic-interactive-foreground": "var(--palette-azure-100)",
+    /** Tekst oppå `interactive-main`. Snur med temaet. */
+    "--semantic-interactive-contrast": "var(--palette-graphite-0)",
+    "--semantic-interactive-visited": "var(--palette-denim-70)",
+    // Semantic: skjemafelt
+    /**
+     * Rammen rundt input, textarea, select og kalenderpanelet.
+     *
+     * graphite-50, ikke graphite-30. WCAG 1.4.11 krever 3:1 for grafiske
+     * avgrensninger, og graphite-30 gir bare 2,12:1 mot hvit flate. Feltet var
+     * så vidt synlig for den som ser dårlig.
+     */
+    "--semantic-field-border": "var(--palette-graphite-50)",
+    "--semantic-field-border-hover": "var(--palette-graphite-70)",
+    // Semantic: farefylte handlinger
+    /**
+     * Fylt flate på danger-knappen når den holdes over, med `danger-contrast`
+     * som tekst. Før mørknet bakgrunnen mens teksten ble stående, og hover
+     * havnet på 3,52:1, altså svakere enn hviletilstanden.
+     */
+    "--semantic-danger-main": "#a82e39",
+    "--semantic-danger-contrast": "var(--palette-graphite-0)",
+    // Semantic: skillelinjer
+    "--semantic-divider-30": "var(--palette-graphite-30)",
+    "--semantic-divider-100": "var(--palette-graphite-100)",
+    /** Forstørrelsesglasset i søkefeltet. */
+    "--semantic-icon-search": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E\")",
+    /**
+     * Haken og streken i avkryssingsboksen.
+     *
+     * De tegnes oppå `interactive-main`, og må derfor følge
+     * `interactive-contrast`, ikke sideflaten.
+     */
+    "--semantic-icon-check": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E\")",
+    "--semantic-icon-dash": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E\")",
+    /**
+     * Ikonene som tegnes inn i bakgrunnen til dato- og klokkeslettfeltet.
+     *
+     * De hører hjemme her og ikke i komponenten, fordi en data-URL ikke kan
+     * lese en CSS-variabel: streken er malt inn i selve bildet. Med ikonet som
+     * token snur det med temaet, som alt annet. Før var streken fast
+     * graphite-70, altså 2,03:1 mot den mørke flaten, og så vidt synlig.
+     */
+    "--semantic-icon-calendar": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E\")",
+    "--semantic-icon-clock": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 15'/%3E%3C/svg%3E\")",
+    /**
+     * Flaten bak en dialog som er åpnet med `showModal()`.
+     *
+     * Den ligger mellom siden og dialogen, og må dempe sideinnholdet i begge
+     * temaer. I mørkt tema er en sort flate nesten usynlig mot bakgrunnen, så
+     * den er kraftigere der.
+     */
+    "--semantic-overlay-backdrop": "var(--palette-dark-alpha-50)",
+    /**
+     * Skyggen under flater som ligger over siden, som kalenderpanelet.
+     *
+     * Hører til det semantiske laget fordi den må snu med temaet: en svak
+     * sort skygge er usynlig mot en nesten sort flate, og panelet mistet
+     * dybden si i mørkt tema.
+     */
+    "--semantic-shadow-overlay": "0 16px 40px rgba(0, 0, 0, 0.12)",
+};
+/**
+ * Verdiene som overstyres i mørkt tema.
+ *
+ * Bare det semantiske laget snur. Paletten er råverdier og er den samme i
+ * begge temaer. Det er hva fargene *betyr* som endrer seg, ikke hvilke
+ * farger som finnes.
+ *
+ * Alle par er kontrollert mot WCAG AA. Se `tokens.browser.test.ts`.
+ */
+export const darkTokens = {
+    // Side: nær sort flate, dempet hvit tekst
+    "--semantic-page-background": "var(--palette-graphite-100)",
+    "--semantic-page-foreground": "var(--palette-graphite-5)",
+    // Status: mørk flate, lys tekst. Speilvendt av lyst tema.
+    "--semantic-danger-background": "var(--palette-burgundy-100)",
+    "--semantic-danger-foreground": "var(--palette-burgundy-30)",
+    "--semantic-warning-background": "var(--palette-ochre-100)",
+    "--semantic-warning-foreground": "var(--palette-ochre-30)",
+    "--semantic-success-background": "var(--palette-forest-100)",
+    "--semantic-success-foreground": "var(--palette-forest-30)",
+    // Deaktivert: graphite-50 på graphite-70 ga 1,83:1 og var uleselig.
+    // graphite-30 gir 3,99:1: fortsatt tydelig av, men mulig å lese.
+    "--semantic-disabled-background": "var(--palette-graphite-70)",
+    "--semantic-disabled-foreground": "var(--palette-graphite-30)",
+    // Dempet, lesbar tekst som holder 8,21:1 mot den mørke flaten
+    "--semantic-muted-foreground": "var(--palette-graphite-30)",
+    // Nøytral status som fortsatt skal leses, og holder 6,71:1
+    "--semantic-neutral-background": "var(--palette-graphite-70)",
+    "--semantic-neutral-foreground": "var(--palette-graphite-10)",
+    // Interaktiv: lys blå på mørk flate, med mørk tekst oppå
+    "--semantic-interactive-background": "var(--palette-azure-100)",
+    "--semantic-interactive-main": "var(--palette-azure-30)",
+    "--semantic-interactive-foreground": "var(--palette-azure-10)",
+    "--semantic-interactive-contrast": "var(--palette-graphite-100)",
+    "--semantic-interactive-visited": "var(--palette-denim-30)",
+    // Skjemafelt: rammen må være lysere enn flaten, ikke mørkere
+    "--semantic-field-border": "var(--palette-graphite-50)",
+    "--semantic-field-border-hover": "var(--palette-graphite-30)",
+    // Farefylte handlinger
+    "--semantic-danger-main": "var(--palette-burgundy-30)",
+    "--semantic-danger-contrast": "var(--palette-graphite-100)",
+    // Skillelinjer
+    "--semantic-divider-30": "var(--palette-graphite-70)",
+    "--semantic-divider-100": "var(--palette-graphite-30)",
+    "--semantic-icon-search": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E\")",
+    // Hake og strek ligger oppå interactive-main, som er lys i mørkt tema
+    "--semantic-icon-check": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E\")",
+    "--semantic-icon-dash": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E\")",
+    // Ikoner: lysere strek, så de holder seg synlige mot den mørke flaten
+    "--semantic-icon-calendar": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E\")",
+    "--semantic-icon-clock": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 15'/%3E%3C/svg%3E\")",
+    // Flaten bak en dialog må dempe mer når siden under alt er mørk
+    "--semantic-overlay-backdrop": "rgba(0, 0, 0, 0.72)",
+    // Skygge: kraftigere, siden flaten under er nesten sort
+    "--semantic-shadow-overlay": "0 16px 40px rgba(0, 0, 0, 0.6)",
+};
+//# sourceMappingURL=tokens.js.map

package/dist/tokens/tokens.js.map

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

package/package.json

@@ -0,0 +1,334 @@
+{
+  "name": "@fristil/designsystem",
+  "version": "0.2.0",
+  "description": "Rammeverksuavhengig designsystem: tokens, CSS-komponenter og web components.",
+  "license": "MIT",
+  "author": "MarkusAugust",
+  "homepage": "https://fristil.netlify.app",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MarkusAugust/fristil.git",
+    "directory": "designsystem"
+  },
+  "bugs": {
+    "url": "https://github.com/MarkusAugust/fristil/issues"
+  },
+  "keywords": [
+    "designsystem",
+    "design-system",
+    "web-components",
+    "custom-elements",
+    "css",
+    "design-tokens",
+    "lit",
+    "accessibility",
+    "universell-utforming"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "fristil": "./dist/cli.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./src/tokens/tokens.css",
+    "./button.css": "./src/components/css/button/button.css",
+    "./link.css": "./src/components/css/link/link.css",
+    "./sr-only.css": "./src/components/css/sr-only/sr-only.css",
+    "./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",
+    "./checkbox.css": "./src/components/css/checkbox/checkbox.css",
+    "./radio.css": "./src/components/css/radio/radio.css",
+    "./switch.css": "./src/components/css/switch/switch.css",
+    "./fieldset.css": "./src/components/css/fieldset/fieldset.css",
+    "./alert.css": "./src/components/css/alert/alert.css",
+    "./card.css": "./src/components/css/card/card.css",
+    "./divider.css": "./src/components/css/divider/divider.css",
+    "./spinner.css": "./src/components/css/spinner/spinner.css",
+    "./badge.css": "./src/components/css/badge/badge.css",
+    "./label.css": "./src/components/css/label/label.css",
+    "./input.css": "./src/components/css/input/input.css",
+    "./textarea.css": "./src/components/css/textarea/textarea.css",
+    "./select.css": "./src/components/css/select/select.css",
+    "./help-text.css": "./src/components/css/help-text/help-text.css",
+    "./error-text.css": "./src/components/css/error-text/error-text.css",
+    "./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"
+    },
+    "./input": {
+      "types": "./dist/components/css/input/input.d.ts",
+      "import": "./dist/components/css/input/input.js"
+    },
+    "./textarea": {
+      "types": "./dist/components/css/textarea/textarea.d.ts",
+      "import": "./dist/components/css/textarea/textarea.js"
+    },
+    "./select": {
+      "types": "./dist/components/css/select/select.d.ts",
+      "import": "./dist/components/css/select/select.js"
+    },
+    "./help-text": {
+      "types": "./dist/components/css/help-text/help-text.d.ts",
+      "import": "./dist/components/css/help-text/help-text.js"
+    },
+    "./error-text": {
+      "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"
+    },
+    "./tabs": {
+      "types": "./dist/components/ramme/tabs/fs-tabs.d.ts",
+      "import": "./dist/components/ramme/tabs/fs-tabs.js"
+    },
+    "./error-summary": {
+      "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"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/tokens.d.ts",
+      "import": "./dist/tokens/tokens.js"
+    },
+    "./tema": {
+      "types": "./dist/tokens/theme.d.ts",
+      "import": "./dist/tokens/theme.js"
+    },
+    "./farge": {
+      "types": "./dist/tokens/color.d.ts",
+      "import": "./dist/tokens/color.js"
+    },
+    "./tailwind.css": "./src/tailwind/tailwind.css",
+    "./badge": {
+      "types": "./dist/components/css/badge/badge.d.ts",
+      "import": "./dist/components/css/badge/badge.js"
+    },
+    "./link": {
+      "types": "./dist/components/css/link/link.d.ts",
+      "import": "./dist/components/css/link/link.js"
+    },
+    "./sr-only": {
+      "types": "./dist/components/css/sr-only/sr-only.d.ts",
+      "import": "./dist/components/css/sr-only/sr-only.js"
+    },
+    "./file-upload": {
+      "types": "./dist/components/css/file-upload/file-upload.d.ts",
+      "import": "./dist/components/css/file-upload/file-upload.js"
+    },
+    "./popover": {
+      "types": "./dist/components/ramme/popover/fs-popover.d.ts",
+      "import": "./dist/components/ramme/popover/fs-popover.js"
+    },
+    "./toast": {
+      "types": "./dist/components/frittstaende/toast/fs-toast.d.ts",
+      "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"
+    },
+    "./checkbox": {
+      "types": "./dist/components/css/checkbox/checkbox.d.ts",
+      "import": "./dist/components/css/checkbox/checkbox.js"
+    },
+    "./radio": {
+      "types": "./dist/components/css/radio/radio.d.ts",
+      "import": "./dist/components/css/radio/radio.js"
+    },
+    "./switch": {
+      "types": "./dist/components/css/switch/switch.d.ts",
+      "import": "./dist/components/css/switch/switch.js"
+    },
+    "./fieldset": {
+      "types": "./dist/components/css/fieldset/fieldset.d.ts",
+      "import": "./dist/components/css/fieldset/fieldset.js"
+    },
+    "./alert": {
+      "types": "./dist/components/css/alert/alert.d.ts",
+      "import": "./dist/components/css/alert/alert.js"
+    },
+    "./card": {
+      "types": "./dist/components/css/card/card.d.ts",
+      "import": "./dist/components/css/card/card.js"
+    },
+    "./divider": {
+      "types": "./dist/components/css/divider/divider.d.ts",
+      "import": "./dist/components/css/divider/divider.js"
+    },
+    "./spinner": {
+      "types": "./dist/components/css/spinner/spinner.d.ts",
+      "import": "./dist/components/css/spinner/spinner.js"
+    },
+    "./shared": {
+      "types": "./dist/components/css/shared.d.ts",
+      "import": "./dist/components/css/shared.js"
+    },
+    "./field-core": {
+      "types": "./dist/components/ramme/field/field-core.d.ts",
+      "import": "./dist/components/ramme/field/field-core.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    },
+    "./react-jsx": {
+      "types": "./dist/jsx/react.d.ts",
+      "import": "./dist/jsx/react.js"
+    },
+    "./dom": {
+      "types": "./dist/dom.d.ts",
+      "import": "./dist/dom.js"
+    },
+    "./table.css": "./src/components/css/table/table.css",
+    "./table": {
+      "types": "./dist/components/css/table/table.d.ts",
+      "import": "./dist/components/css/table/table.js"
+    },
+    "./list.css": "./src/components/css/list/list.css",
+    "./list": {
+      "types": "./dist/components/css/list/list.d.ts",
+      "import": "./dist/components/css/list/list.js"
+    },
+    "./tag.css": "./src/components/css/tag/tag.css",
+    "./tag": {
+      "types": "./dist/components/css/tag/tag.d.ts",
+      "import": "./dist/components/css/tag/tag.js"
+    },
+    "./avatar.css": "./src/components/css/avatar/avatar.css",
+    "./avatar": {
+      "types": "./dist/components/css/avatar/avatar.d.ts",
+      "import": "./dist/components/css/avatar/avatar.js"
+    },
+    "./skeleton.css": "./src/components/css/skeleton/skeleton.css",
+    "./skeleton": {
+      "types": "./dist/components/css/skeleton/skeleton.d.ts",
+      "import": "./dist/components/css/skeleton/skeleton.js"
+    },
+    "./breadcrumbs.css": "./src/components/css/breadcrumbs/breadcrumbs.css",
+    "./breadcrumbs": {
+      "types": "./dist/components/css/breadcrumbs/breadcrumbs.d.ts",
+      "import": "./dist/components/css/breadcrumbs/breadcrumbs.js"
+    },
+    "./pagination.css": "./src/components/css/pagination/pagination.css",
+    "./pagination": {
+      "types": "./dist/components/css/pagination/pagination.d.ts",
+      "import": "./dist/components/css/pagination/pagination.js"
+    },
+    "./skip-link.css": "./src/components/css/skip-link/skip-link.css",
+    "./skip-link": {
+      "types": "./dist/components/css/skip-link/skip-link.d.ts",
+      "import": "./dist/components/css/skip-link/skip-link.js"
+    },
+    "./accordion.css": "./src/components/css/accordion/accordion.css",
+    "./accordion": {
+      "types": "./dist/components/css/accordion/accordion.d.ts",
+      "import": "./dist/components/css/accordion/accordion.js"
+    },
+    "./dialog.css": "./src/components/css/dialog/dialog.css",
+    "./dialog": {
+      "types": "./dist/components/css/dialog/dialog.d.ts",
+      "import": "./dist/components/css/dialog/dialog.js"
+    },
+    "./search.css": "./src/components/css/search/search.css",
+    "./search": {
+      "types": "./dist/components/css/search/search.d.ts",
+      "import": "./dist/components/css/search/search.js"
+    },
+    "./toggle-group.css": "./src/components/css/toggle-group/toggle-group.css",
+    "./toggle-group": {
+      "types": "./dist/components/css/toggle-group/toggle-group.d.ts",
+      "import": "./dist/components/css/toggle-group/toggle-group.js"
+    },
+    "./tooltip.css": "./src/components/css/tooltip/tooltip.css",
+    "./tooltip": {
+      "types": "./dist/components/css/tooltip/tooltip.d.ts",
+      "import": "./dist/components/css/tooltip/tooltip.js"
+    },
+    "./heading.css": "./src/components/css/heading/heading.css",
+    "./heading": {
+      "types": "./dist/components/css/heading/heading.d.ts",
+      "import": "./dist/components/css/heading/heading.js"
+    },
+    "./paragraph.css": "./src/components/css/paragraph/paragraph.css",
+    "./paragraph": {
+      "types": "./dist/components/css/paragraph/paragraph.d.ts",
+      "import": "./dist/components/css/paragraph/paragraph.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src/tokens",
+    "src/components",
+    "src/tailwind",
+    "CHANGELOG.md",
+    "!**/*.browser.test.ts",
+    "!**/*.test.ts",
+    "!**/*.tsbuildinfo"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "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",
+    "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:tailwind": "bun scripts/sjekk-tailwind.ts",
+    "nettlesere": "playwright install chromium firefox webkit",
+    "tema": "bun src/cli.ts",
+    "sjekk:cli": "bun scripts/sjekk-cli.ts",
+    "sjekk:versjon": "bun scripts/sjekk-versjon.ts",
+    "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",
+    "vite": "7.0.0",
+    "vitest": "4.1.7"
+  }
+}

package/src/components/css/accordion/accordion.css

@@ -0,0 +1,74 @@
+@layer fristil {
+  .fs-accordion {
+    box-sizing: border-box;
+    border: 1px solid var(--semantic-divider-30);
+    border-radius: var(--fs-accordion-radius, var(--size-1));
+    font-family: inherit;
+    font-size: var(--font-size-m);
+    line-height: 1.5;
+    color: var(--semantic-page-foreground);
+    background: var(--semantic-page-background);
+  }
+
+  .fs-accordion + .fs-accordion {
+    margin-block-start: var(--size-2);
+  }
+
+  .fs-accordion summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--size-2);
+    padding: var(--fs-accordion-padding, var(--size-3) var(--size-4));
+    font-weight: 600;
+    cursor: pointer;
+    /* Trekanten fra nettleseren er ulik i hver av dem. Den byttes ut med en
+       som er lik overalt, og som snur med panelet. */
+    list-style: none;
+  }
+
+  .fs-accordion summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .fs-accordion summary::after {
+    content: "";
+    inline-size: var(--size-2);
+    block-size: var(--size-2);
+    flex: none;
+    border-inline-end: 2px solid var(--semantic-interactive-main);
+    border-block-end: 2px solid var(--semantic-interactive-main);
+    transform: rotate(45deg) translate(-2px, -2px);
+  }
+
+  .fs-accordion[open] summary::after {
+    transform: rotate(225deg) translate(-2px, -2px);
+  }
+
+  .fs-accordion summary:hover {
+    background: var(--semantic-neutral-background);
+  }
+
+  .fs-accordion summary:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: -2px;
+  }
+
+  .fs-accordion__content {
+    padding: 0 var(--size-4) var(--size-4);
+  }
+
+  .fs-accordion__content > :first-child {
+    margin-block-start: 0;
+  }
+
+  .fs-accordion__content > :last-child {
+    margin-block-end: 0;
+  }
+
+  .fs-accordion[data-variant="plain"] {
+    border-inline: 0;
+    border-block-start: 0;
+    border-radius: 0;
+  }
+}