@fremtind/jokul 0.8.1 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fremtind/jokul",
-    "version": "0.8.1",
+    "version": "0.10.0",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -18,14 +18,27 @@
         "./src/core/styles",
         "./src/core/jkl",
         "./src/core/tokens.less",
+        "./src/components/accordion/styles",
+        "./src/components/breadcrumb/styles",
+        "./src/components/button/styles",
         "./src/components/card/styles",
+        "./src/components/checkbox/styles",
+        "./src/components/combobox/styles",
+        "./src/components/cookie-consent/styles",
+        "./src/components/datepicker/styles",
         "./src/components/icon/styles",
         "./src/components/icon-button/styles",
         "./src/components/image/styles",
         "./src/components/link/styles",
         "./src/components/link-list/styles",
+        "./src/components/list/styles",
         "./src/components/loader/styles",
-        "./src/components/tag/styles"
+        "./src/components/modal/styles",
+        "./src/components/radio-button/styles",
+        "./src/components/select/styles",
+        "./src/components/tag/styles",
+        "./src/components/text-input/styles",
+        "./src/components/tooltip/styles"
     ],
     "exports": {
         ".": {
@@ -56,15 +69,27 @@
             "import": "./build/es/components/index.js"
         },
         "./styles/core/*": "./src/core/styles/*",
+        "./styles/accordion/*": "./src/components/accordion/styles/*",
+        "./styles/breadcrumb/*": "./src/components/breadcrumb/styles/*",
+        "./styles/button/*": "./src/components/button/styles/*",
         "./styles/card/*": "./src/components/card/styles/*",
+        "./styles/checkbox/*": "./src/components/checkbox/styles/*",
+        "./styles/combobox/*": "./src/components/combobox/styles/*",
+        "./styles/cookie-consent/*": "./src/components/cookie-consent/styles/*",
+        "./styles/datepicker/*": "./src/components/datepicker/styles/*",
         "./styles/icon/*": "./src/components/icon/styles/*",
         "./styles/icon-button/*": "./src/components/icon-button/styles/*",
         "./styles/input-group/*": "./src/components/input-group/styles/*",
         "./styles/image/*": "./src/components/image/styles/*",
         "./styles/link/*": "./src/components/link/styles/*",
         "./styles/link-list/*": "./src/components/link-list/styles/*",
+        "./styles/list/*": "./src/components/list/styles/*",
         "./styles/loader/*": "./src/components/loader/styles/*",
+        "./styles/modal/*": "./src/components/modal/styles/*",
+        "./styles/radio-button/*": "./src/components/radio-button/styles/*",
+        "./styles/select/*": "./src/components/select/styles/*",
         "./styles/tag/*": "./src/components/tag/styles/*",
+        "./styles/text-input/*": "./src/components/text-input/styles/*",
         "./styles/tooltip/*": "./src/components/tooltip/styles/*"
     },
     "scripts": {
@@ -78,7 +103,9 @@
     },
     "optionalDependencies": {
         "@floating-ui/react": "^0.24.2",
-        "framer-motion": "^7.10.3"
+        "date-fns": "^2.30.0",
+        "framer-motion": "^7.10.3",
+        "react-a11y-dialog": "^6.2.0"
     },
     "devDependencies": {
         "@rollup/plugin-terser": "^0.4.4",
@@ -105,5 +132,5 @@
     "bugs": {
         "url": "https://github.com/fremtind/jokul/issues"
     },
-    "gitHead": "151367531540e41ded599f8b9c60b09ff184ae19"
+    "gitHead": "1b4c7f2e715f66f3a6ad55a3e4dd6d1d07c091a4"
 }

package/src/components/accordion/styles/_index.scss

@@ -0,0 +1 @@
+@forward "accordion";

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

@@ -0,0 +1,166 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+.jkl-accordion {
+  width: 100%;
+}
+.jkl .jkl-accordion, .jkl-accordion[data-layout-density=comfortable], .jkl-accordion[data-density=comfortable], [data-layout-density=comfortable] .jkl-accordion, [data-density=comfortable] .jkl-accordion {
+  --title-padding: var(--jkl-spacing-16) 3rem var(--jkl-spacing-16) var(--jkl-spacing-16);
+  --arrow-top: 1.25rem;
+  --arrow-right: var(--jkl-spacing-12);
+  --content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16) var(--jkl-spacing-16);
+  --title-font-size: var(--jkl-body-font-size);
+  --title-line-height: var(--jkl-body-line-height);
+  --title-font-weight: var(--jkl-body-font-weight);
+  --content-font-size: var(--jkl-body-font-size);
+  --content-line-height: var(--jkl-body-line-height);
+  --content-font-weight: var(--jkl-body-font-weight);
+}
+@media (width >= 0) and (max-width: 679px) {
+  .jkl .jkl-accordion, .jkl-accordion[data-layout-density=comfortable], .jkl-accordion[data-density=comfortable], [data-layout-density=comfortable] .jkl-accordion, [data-density=comfortable] .jkl-accordion {
+    --title-padding: var(--jkl-spacing-12) 2.75rem var(--jkl-spacing-12) var(--jkl-spacing-12);
+    --content-padding: var(--jkl-spacing-8) var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);
+    --arrow-top: 1.4375rem;
+  }
+}
+.jkl-accordion[data-layout-density=compact], .jkl-accordion[data-density=compact], [data-layout-density=compact] .jkl-accordion, [data-density=compact] .jkl-accordion {
+  --title-padding: var(--jkl-spacing-8) 2rem var(--jkl-spacing-8) var(--jkl-spacing-8);
+  --arrow-top: var(--jkl-spacing-8);
+  --arrow-right: var(--jkl-spacing-4);
+  --content-padding: var(--jkl-spacing-8);
+  --title-font-size: var(--jkl-small-font-size);
+  --title-line-height: var(--jkl-small-line-height);
+  --title-font-weight: var(--jkl-small-font-weight);
+  --content-font-size: var(--jkl-small-font-size);
+  --content-line-height: var(--jkl-small-line-height);
+  --content-font-weight: var(--jkl-small-font-weight);
+}
+
+.jkl-accordion-item {
+  --background: transparent;
+  --text-color: var(--jkl-color-text-default);
+  --title-text-color: var(--jkl-color-text-interactive);
+  --border-color: var(--jkl-color-border-separator);
+  background-color: var(--background);
+  color: var(--text-color);
+  border-bottom: 0.0625rem solid var(--border-color);
+  transition-timing-function: ease;
+  transition-duration: 100ms;
+  transition-property: border-color;
+}
+.jkl-accordion-item:hover {
+  --border-color: var(--jkl-color-border-separator-hover);
+}
+.jkl-accordion-item:hover:not(:first-child) {
+  border-top: 0.0625rem solid var(--border-color);
+}
+.jkl-accordion-item:has(+ [open]), .jkl-accordion-item:has(+ :hover) {
+  border-bottom: none;
+}
+.jkl-accordion-item[open] {
+  --background: var(--jkl-color-background-container-high);
+  border-top: 0.0625rem solid var(--border-color);
+}
+.jkl-accordion-item[open] .jkl-accordion-item__title {
+  --jkl-icon-weight: 500;
+  font-weight: 700;
+  letter-spacing: -0.014em;
+}
+.jkl-accordion-item__title {
+  font-size: var(--title-font-size);
+  line-height: var(--title-line-height);
+  font-weight: var(--title-font-weight);
+  cursor: pointer;
+  color: var(--title-text-color);
+  list-style: none;
+  background-color: transparent;
+  position: relative;
+  padding: var(--title-padding);
+  text-align: left;
+  width: 100%;
+  box-sizing: border-box;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-accordion-item__title:active, .jkl-accordion-item__title:hover, .jkl-accordion-item__title:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-accordion-item__title {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-accordion-item__title:active, .jkl-accordion-item__title:hover, .jkl-accordion-item__title:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-accordion-item__title::-webkit-details-marker {
+  display: none;
+}
+.jkl-accordion-item__title:hover {
+  --title-text-color: var(--jkl-color-text-interactive-hover);
+}
+.jkl-accordion-item__title:hover .jkl-accordion-item__arrow {
+  translate: 0 0.25rem;
+}
+.jkl-accordion-item__title:focus-visible {
+  outline: 2px solid var(--jkl-color-border-action);
+  outline-offset: 0;
+}
+.jkl-accordion-item__arrow {
+  pointer-events: none;
+  position: absolute;
+  right: var(--arrow-right);
+  top: var(--arrow-top);
+  transition-timing-function: ease;
+  transition-duration: 100ms;
+  transition-property: translate;
+}
+@media screen and (forced-colors: active) {
+  .jkl-accordion-item__arrow {
+    stroke: ButtonText;
+    fill: ButtonText;
+  }
+  .jkl-accordion-item__arrow svg, .jkl-accordion-item__arrow path {
+    stroke: ButtonText;
+    fill: ButtonText;
+  }
+}
+.jkl-accordion-item__content-wrapper {
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: height;
+}
+.jkl-accordion-item__content {
+  font-size: var(--content-font-size);
+  line-height: var(--content-line-height);
+  font-weight: var(--content-font-weight);
+  height: auto;
+  padding: var(--content-padding);
+}
+@media screen and (forced-colors: active) {
+  .jkl-accordion-item:nth-child(n) {
+    border-top: 0.125rem solid ButtonText;
+  }
+  .jkl-accordion-item:nth-child(n):hover {
+    border-top: 0.125rem solid ButtonText;
+  }
+  .jkl-accordion-item:nth-child(n):hover + .jkl-accordion-item {
+    border-top: 0.125rem solid ButtonText;
+  }
+  .jkl-accordion-item:last-child {
+    border-bottom: 0.125rem solid ButtonText;
+  }
+  .jkl-accordion-item:last-child:hover {
+    border-bottom: 0.125rem solid ButtonText;
+  }
+  .jkl-accordion-item__title {
+    background-color: ButtonFace;
+    outline: revert;
+  }
+}

package/src/components/accordion/styles/accordion.min.css

@@ -0,0 +1 @@
+.jkl-accordion{width:100%}.jkl .jkl-accordion,.jkl-accordion[data-density=comfortable],.jkl-accordion[data-layout-density=comfortable],[data-density=comfortable] .jkl-accordion,[data-layout-density=comfortable] .jkl-accordion{--title-padding:var(--jkl-spacing-16) 3rem var(--jkl-spacing-16) var(--jkl-spacing-16);--arrow-top:1.25rem;--arrow-right:var(--jkl-spacing-12);--content-padding:var(--jkl-spacing-8) var(--jkl-spacing-16) var(--jkl-spacing-16);--title-font-size:var(--jkl-body-font-size);--title-line-height:var(--jkl-body-line-height);--title-font-weight:var(--jkl-body-font-weight);--content-font-size:var(--jkl-body-font-size);--content-line-height:var(--jkl-body-line-height);--content-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){.jkl .jkl-accordion,.jkl-accordion[data-density=comfortable],.jkl-accordion[data-layout-density=comfortable],[data-density=comfortable] .jkl-accordion,[data-layout-density=comfortable] .jkl-accordion{--title-padding:var(--jkl-spacing-12) 2.75rem var(--jkl-spacing-12) var(--jkl-spacing-12);--content-padding:var(--jkl-spacing-8) var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);--arrow-top:1.4375rem}}.jkl-accordion[data-density=compact],.jkl-accordion[data-layout-density=compact],[data-density=compact] .jkl-accordion,[data-layout-density=compact] .jkl-accordion{--title-padding:var(--jkl-spacing-8) 2rem var(--jkl-spacing-8) var(--jkl-spacing-8);--arrow-top:var(--jkl-spacing-8);--arrow-right:var(--jkl-spacing-4);--content-padding:var(--jkl-spacing-8);--title-font-size:var(--jkl-small-font-size);--title-line-height:var(--jkl-small-line-height);--title-font-weight:var(--jkl-small-font-weight);--content-font-size:var(--jkl-small-font-size);--content-line-height:var(--jkl-small-line-height);--content-font-weight:var(--jkl-small-font-weight)}.jkl-accordion-item{--background:#0000;--text-color:var(--jkl-color-text-default);--title-text-color:var(--jkl-color-text-interactive);--border-color:var(--jkl-color-border-separator);background-color:var(--background);border-bottom:.0625rem solid var(--border-color);color:var(--text-color);transition-duration:.1s;transition-property:border-color;transition-timing-function:ease}.jkl-accordion-item:hover{--border-color:var(--jkl-color-border-separator-hover)}.jkl-accordion-item:hover:not(:first-child){border-top:.0625rem solid var(--border-color)}.jkl-accordion-item:has(+:hover),.jkl-accordion-item:has(+[open]){border-bottom:none}.jkl-accordion-item[open]{--background:var(--jkl-color-background-container-high);border-top:.0625rem solid var(--border-color)}.jkl-accordion-item[open] .jkl-accordion-item__title{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-accordion-item__title{background-color:initial;border-style:none;box-sizing:border-box;color:var(--title-text-color);cursor:pointer;font-size:var(--title-font-size);font-weight:var(--title-font-weight);line-height:var(--title-line-height);list-style:none;padding:var(--title-padding);position:relative;text-align:left;width:100%}.jkl-accordion-item__title,.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-accordion-item__title{border-style:revert}.jkl-accordion-item__title,.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:revert;outline-style:revert}}.jkl-accordion-item__title::-webkit-details-marker{display:none}.jkl-accordion-item__title:hover{--title-text-color:var(--jkl-color-text-interactive-hover)}.jkl-accordion-item__title:hover .jkl-accordion-item__arrow{translate:0 .25rem}.jkl-accordion-item__title:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:0}.jkl-accordion-item__arrow{pointer-events:none;position:absolute;right:var(--arrow-right);top:var(--arrow-top);transition-duration:.1s;transition-property:translate;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-accordion-item__arrow,.jkl-accordion-item__arrow path,.jkl-accordion-item__arrow svg{stroke:ButtonText;fill:ButtonText}}.jkl-accordion-item__content-wrapper{transition-duration:.15s;transition-property:height;transition-timing-function:ease}.jkl-accordion-item__content{font-size:var(--content-font-size);font-weight:var(--content-font-weight);height:auto;line-height:var(--content-line-height);padding:var(--content-padding)}@media screen and (forced-colors:active){.jkl-accordion-item:nth-child(n),.jkl-accordion-item:nth-child(n):hover,.jkl-accordion-item:nth-child(n):hover+.jkl-accordion-item{border-top:.125rem solid ButtonText}.jkl-accordion-item:last-child,.jkl-accordion-item:last-child:hover{border-bottom:.125rem solid ButtonText}.jkl-accordion-item__title{background-color:ButtonFace;outline:revert}}

package/src/components/accordion/styles/accordion.scss

@@ -0,0 +1,147 @@
+@charset "UTF-8";
+@use "../../../core/jkl";
+
+.jkl-accordion {
+    width: 100%;
+
+    @include jkl.comfortable-density {
+        --title-padding: var(--jkl-spacing-16) #{jkl.rem(48px)} var(--jkl-spacing-16) var(--jkl-spacing-16);
+        --arrow-top: #{jkl.rem(20px)};
+        --arrow-right: var(--jkl-spacing-12);
+        --content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16) var(--jkl-spacing-16);
+        @include jkl.declare-font-variables("title", "body");
+        @include jkl.declare-font-variables("content", "body");
+
+        @include jkl.small-device {
+            --title-padding: var(--jkl-spacing-12) #{jkl.rem(44px)} var(--jkl-spacing-12) var(--jkl-spacing-12);
+            --content-padding: var(--jkl-spacing-8) var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);
+            --arrow-top: #{jkl.rem(23px)};
+        }
+    }
+
+    @include jkl.compact-density {
+        --title-padding: var(--jkl-spacing-8) #{jkl.rem(32px)} var(--jkl-spacing-8) var(--jkl-spacing-8);
+        --arrow-top: var(--jkl-spacing-8);
+        --arrow-right: var(--jkl-spacing-4);
+        --content-padding: var(--jkl-spacing-8);
+        @include jkl.declare-font-variables("title", "small");
+        @include jkl.declare-font-variables("content", "small");
+    }
+}
+
+.jkl-accordion-item {
+    --background: transparent;
+    --text-color: var(--jkl-color-text-default);
+    --title-text-color: var(--jkl-color-text-interactive);
+    --border-color: var(--jkl-color-border-separator);
+
+    background-color: var(--background);
+    color: var(--text-color);
+    border-bottom: jkl.rem(1px) solid var(--border-color);
+
+    @include jkl.motion("standard", "snappy", border-color);
+
+    &:hover {
+        --border-color: var(--jkl-color-border-separator-hover);
+
+        &:not(:first-child) {
+            border-top: jkl.rem(1px) solid var(--border-color);
+        }
+    }
+
+    &:has(+ [open]),
+    &:has(+ :hover) {
+        border-bottom: none;
+    }
+
+    &[open] {
+        --background: var(--jkl-color-background-container-high);
+        border-top: jkl.rem(1px) solid var(--border-color);
+
+        .jkl-accordion-item__title {
+            @include jkl.no-grow-bold;
+        }
+    }
+
+    &__title {
+        @include jkl.use-font-variables("title");
+
+        cursor: pointer;
+        color: var(--title-text-color);
+        list-style: none;
+        background-color: transparent;
+        position: relative;
+        padding: var(--title-padding);
+        text-align: left;
+        width: 100%;
+        box-sizing: border-box;
+
+        @include jkl.reset-outline;
+
+        &::-webkit-details-marker {
+            display: none;
+        }
+
+        &:hover {
+            --title-text-color: var(--jkl-color-text-interactive-hover);
+
+            .jkl-accordion-item__arrow {
+                translate: 0 jkl.rem(4px);
+            }
+        }
+
+        &:focus-visible {
+            @include jkl.focus-outline($offset: 0);
+        }
+    }
+
+    &__arrow {
+        pointer-events: none;
+        position: absolute;
+        right: var(--arrow-right);
+        top: var(--arrow-top);
+
+        @include jkl.motion("standard", "snappy");
+        transition-property: translate;
+
+        @include jkl.forced-colors-svg-fallback($stroke: ButtonText, $fill: ButtonText);
+    }
+
+    &__content-wrapper {
+        @include jkl.motion;
+        transition-property: height;
+    }
+
+    &__content {
+        @include jkl.use-font-variables("content");
+        height: auto;
+        padding: var(--content-padding);
+    }
+
+    @include jkl.forced-colors-mode {
+        &:nth-child(n) {
+            border-top: jkl.rem(2px) solid ButtonText;
+
+            &:hover {
+                border-top: jkl.rem(2px) solid ButtonText;
+
+                + .jkl-accordion-item {
+                    border-top: jkl.rem(2px) solid ButtonText;
+                }
+            }
+        }
+
+        &:last-child {
+            border-bottom: jkl.rem(2px) solid ButtonText;
+
+            &:hover {
+                border-bottom: jkl.rem(2px) solid ButtonText;
+            }
+        }
+
+        &__title {
+            background-color: ButtonFace;
+            outline: revert;
+        }
+    }
+}

package/src/components/breadcrumb/styles/_index.scss

@@ -0,0 +1 @@
+@forward "breadcrumb";

package/src/components/breadcrumb/styles/breadcrumb.css

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+.jkl-breadcrumb a[aria-current] {
+  text-decoration: none;
+  background-image: none;
+  color: var(--jkl-color-text-interactive);
+}
+.jkl-breadcrumb a[aria-current]:hover {
+  cursor: default;
+  color: var(--jkl-color-text-interactive-hover);
+  background-image: none;
+}
+.jkl-breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding-inline-start: 0;
+}
+.jkl-breadcrumb__item {
+  margin-bottom: 0.5rem;
+  white-space: nowrap;
+}
+.jkl-breadcrumb__item-separator {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}

package/src/components/breadcrumb/styles/breadcrumb.min.css

@@ -0,0 +1 @@
+.jkl-breadcrumb a[aria-current]{background-image:none;color:var(--jkl-color-text-interactive);text-decoration:none}.jkl-breadcrumb a[aria-current]:hover{background-image:none;color:var(--jkl-color-text-interactive-hover);cursor:default}.jkl-breadcrumb__list{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding-inline-start:0}.jkl-breadcrumb__item{margin-bottom:.5rem;white-space:nowrap}.jkl-breadcrumb__item-separator{padding-left:.5rem;padding-right:.5rem}

package/src/components/breadcrumb/styles/breadcrumb.scss

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+@use "../../../core/jkl";
+
+.jkl-breadcrumb {
+    a[aria-current] {
+        text-decoration: none;
+        background-image: none;
+        color: var(--jkl-color-text-interactive);
+
+        &:hover {
+            cursor: default;
+            color: var(--jkl-color-text-interactive-hover);
+            background-image: none;
+        }
+    }
+
+    &__list {
+        display: flex;
+        flex-wrap: wrap;
+        list-style: none;
+        margin: 0;
+        padding-inline-start: 0;
+    }
+
+    &__item {
+        margin-bottom: jkl.$spacing-8;
+        white-space: nowrap;
+    }
+
+    &__item-separator {
+        padding-left: jkl.$spacing-8;
+        padding-right: jkl.$spacing-8;
+    }
+}

package/src/components/button/styles/_index.scss

@@ -0,0 +1 @@
+@forward "button";