@fremtind/jokul 5.2.3 → 6.0.0-next.1

package/styles/components/date-input/date-input.css

@@ -0,0 +1,187 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
+  .jkl-date-input {
+    anchor-scope: all;
+  }
+  .jkl-date-input__wrapper {
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-vertical-padding: var(--jkl-unit-15);
+    --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
+    --jkl-text-input-action-button-size: var(--jkl-unit-60);
+    --jkl-text-input-action-button-icon-size: var(--jkl-unit-30);
+    --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
+    --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
+    --text-color: var(--jkl-color-text-default);
+    --background-color: transparent;
+    --border-color: var(--jkl-color-border-default);
+    --placeholder-color: var(--jkl-color-text-subdued);
+    border-radius: var(--jkl-border-radius-s);
+    box-sizing: border-box;
+    max-width: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    font: var(--jkl-text-style-text-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
+    transition-property: color, box-shadow, background-color;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
+  }
+  .jkl-date-input__wrapper:focus-within, .jkl-date-input__wrapper:has([data-focused=true]) {
+    --background-color: var(--jkl-color-background-container);
+  }
+  .jkl-date-input__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
+    --text-color: var(--jkl-color-error-text-default);
+    --border-color: var(--jkl-color-error-border-default);
+    --placeholder-color: var(--jkl-color-error-text-subdued);
+  }
+  .jkl-date-input__wrapper:hover, .jkl-date-input__wrapper:focus-within, .jkl-date-input__wrapper:has([data-focused=true]) {
+    --border-color: var(--jkl-color-border-strong);
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-date-input__wrapper:hover, .jkl-date-input__wrapper:focus-within, .jkl-date-input__wrapper:has([data-focused=true]) {
+      border: 0.125rem solid ButtonText;
+    }
+  }
+  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-date-input__wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-date-input__wrapper:has(.jkl-text-area__text-area:focus-visible) {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
+  .jkl-date-input__wrapper > .jkl-icon-button:focus-visible {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: -8px;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-date-input__wrapper > .jkl-icon-button:focus-visible {
+      --border-color: ButtonText;
+    }
+  }
+  .jkl-date-input__wrapper > .jkl-text-input-action-button {
+    flex-shrink: 0;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    padding: var(--jkl-text-input-action-button-padding);
+    height: var(--jkl-text-input-action-button-size);
+    width: var(--jkl-text-input-action-button-size);
+    margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
+  }
+  .jkl-date-input__wrapper > .jkl-text-input-action-button .jkl-icon-button__icon {
+    height: var(--jkl-text-input-action-button-icon-size);
+    width: var(--jkl-text-input-action-button-icon-size);
+  }
+  .jkl-date-input__wrapper > .jkl-text-input-action-button:hover {
+    color: var(--jkl-color-text-subdued);
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-date-input__wrapper > .jkl-text-input-action-button:hover {
+      border: 0.125rem inset ButtonText;
+    }
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-date-input__wrapper {
+      border: 0.125rem inset ButtonText;
+    }
+  }
+  .jkl-date-input__wrapper {
+    display: grid;
+    grid-template-columns: 1fr max-content;
+    max-width: 18ch;
+    anchor-name: --calendar-trigger;
+  }
+  .jkl-date-input input[type=date] {
+    background: none;
+    -webkit-appearance: none;
+    color: inherit;
+    font: var(--jkl-text-style-text-medium);
+  }
+  .jkl-date-input input[type=date] {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+  }
+  .jkl-date-input input[type=date]:active, .jkl-date-input input[type=date]:hover, .jkl-date-input input[type=date]:focus {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-date-input input[type=date] {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-date-input input[type=date]:active, .jkl-date-input input[type=date]:hover, .jkl-date-input input[type=date]:focus {
+      outline: revert;
+      outline-style: revert;
+    }
+  }
+  .jkl-date-input input[type=date] input[type=number]::-webkit-outer-spin-button,
+  .jkl-date-input input[type=date] input[type=number]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+  .jkl-date-input input[type=date] input[type=number] {
+    -moz-appearance: textfield;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-date-input input[type=date] {
+      outline: none;
+      border: none;
+    }
+    .jkl-date-input input[type=date]:focus-visible {
+      outline: none;
+    }
+  }
+  .jkl-date-input input[type=date]::placeholder {
+    opacity: 1;
+    color: var(--placeholder-color);
+  }
+  .jkl-date-input input[type=date] {
+    height: 100%;
+    width: 100%;
+    padding: var(--jkl-unit-15);
+    padding-inline-end: var(--jkl-unit-15);
+    box-sizing: border-box;
+  }
+  .jkl-date-input input[type=date]::-webkit-calendar-picker-indicator, .jkl-date-input input[type=date]::-webkit-inner-spin-button {
+    display: none;
+    -webkit-appearance: none;
+  }
+  .jkl-date-input input[type=date][data-empty=true] {
+    color: var(--jkl-color-text-subdued);
+  }
+  .jkl-date-input .jkl-calendar {
+    border: none;
+    padding: var(--jkl-unit-40);
+    display: none;
+    position: fixed;
+    width: 80svw;
+  }
+  .jkl-date-input .jkl-calendar:popover-open {
+    display: block;
+  }
+  @media screen and (min-width: 600px) {
+    .jkl-date-input .jkl-calendar__labels {
+      display: none;
+    }
+    .jkl-date-input .jkl-calendar {
+      width: max-content;
+      margin-block: var(--jkl-unit-10);
+      margin-left: 0;
+      position-anchor: --calendar-trigger;
+      top: anchor(bottom);
+      left: anchor(left);
+      position-try-fallbacks: --fallback-calendar-position;
+    }
+  }
+}
+@position-try --fallback-calendar-position {
+  bottom: anchor(top);
+  top: unset;
+  margin-top: 10px;
+}

package/styles/components/date-input/date-input.min.css

@@ -0,0 +1 @@
+@layer jokul.components{.jkl-date-input{anchor-scope:all}.jkl-date-input__wrapper{--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-vertical-padding:var(--jkl-unit-15);--jkl-text-input-horizontal-padding:var(--jkl-unit-15);--jkl-text-input-action-button-size:var(--jkl-unit-60);--jkl-text-input-action-button-icon-size:var(--jkl-unit-30);--jkl-text-input-action-button-padding:var(--jkl-unit-10) 0;--jkl-text-input-action-button-focus-position:var(--jkl-unit-05);--text-color:var(--jkl-color-text-default);--background-color:#0000;--border-color:var(--jkl-color-border-default);--placeholder-color:var(--jkl-color-text-subdued);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;max-width:100%;position:relative;display:flex;align-items:center;font:var(--jkl-text-style-text-medium);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:color,box-shadow,background-color;background-color:var(--background-color);color:var(--text-color);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem #0000}.jkl-date-input__wrapper:focus-within,.jkl-date-input__wrapper:has([data-focused=true]){--background-color:var(--jkl-color-background-container)}.jkl-date-input__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])){--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-default);--placeholder-color:var(--jkl-color-error-text-subdued)}.jkl-date-input__wrapper:focus-within,.jkl-date-input__wrapper:has([data-focused=true]),.jkl-date-input__wrapper:hover{--border-color:var(--jkl-color-border-strong);box-shadow:inset 0 0 0 .0625rem var(--border-color),0 0 0 .0625rem var(--border-color)}@media screen and (forced-colors:active){.jkl-date-input__wrapper:focus-within,.jkl-date-input__wrapper:has([data-focused=true]),.jkl-date-input__wrapper:hover{border:.125rem solid ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-date-input__wrapper:has(.jkl-text-area__text-area:focus-visible),html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-date-input__wrapper:has(.jkl-text-input__input:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-date-input__wrapper>.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:-8px}@media screen and (forced-colors:active){.jkl-date-input__wrapper>.jkl-icon-button:focus-visible{--border-color:ButtonText}}.jkl-date-input__wrapper>.jkl-text-input-action-button{flex-shrink:0;display:flex;box-sizing:border-box;align-items:center;justify-content:center;padding:var(--jkl-text-input-action-button-padding);height:var(--jkl-text-input-action-button-size);width:var(--jkl-text-input-action-button-size);-webkit-margin-start:calc(var(--jkl-text-input-horizontal-padding)*-1);margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-date-input__wrapper>.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-date-input__wrapper>.jkl-text-input-action-button:hover{color:var(--jkl-color-text-subdued)}@media screen and (forced-colors:active){.jkl-date-input__wrapper,.jkl-date-input__wrapper>.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}.jkl-date-input__wrapper{display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;max-width:18ch;anchor-name:--calendar-trigger}.jkl-date-input input[type=date]{background:none;-webkit-appearance:none;color:inherit;font:var(--jkl-text-style-text-medium);outline:0;border-style:none;outline-style:none}.jkl-date-input input[type=date]:active,.jkl-date-input input[type=date]:focus,.jkl-date-input input[type=date]:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-date-input input[type=date]{border-style:revert}.jkl-date-input input[type=date],.jkl-date-input input[type=date]:active,.jkl-date-input input[type=date]:focus,.jkl-date-input input[type=date]:hover{outline:revert;outline-style:revert}}.jkl-date-input input[type=date] input[type=number]::-webkit-inner-spin-button,.jkl-date-input input[type=date] input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-date-input input[type=date] input[type=number]{-moz-appearance:textfield}@media screen and (forced-colors:active){.jkl-date-input input[type=date]{outline:none;border:none}.jkl-date-input input[type=date]:focus-visible{outline:none}}.jkl-date-input input[type=date]::placeholder{opacity:1;color:var(--placeholder-color)}.jkl-date-input input[type=date]{height:100%;width:100%;padding:var(--jkl-unit-15);-webkit-padding-end:var(--jkl-unit-15);padding-inline-end:var(--jkl-unit-15);box-sizing:border-box}.jkl-date-input input[type=date]::-webkit-calendar-picker-indicator,.jkl-date-input input[type=date]::-webkit-inner-spin-button{display:none;-webkit-appearance:none}.jkl-date-input input[type=date][data-empty=true]{color:var(--jkl-color-text-subdued)}.jkl-date-input .jkl-calendar{border:none;padding:var(--jkl-unit-40);display:none;position:fixed;width:80svw}.jkl-date-input .jkl-calendar:popover-open{display:block}@media screen and (min-width:600px){.jkl-date-input .jkl-calendar__labels{display:none}.jkl-date-input .jkl-calendar{width:-webkit-max-content;width:max-content;margin-block:var(--jkl-unit-10);margin-left:0;position-anchor:--calendar-trigger;top:anchor(bottom);left:anchor(left);position-try-fallbacks:--fallback-calendar-position}}}@position-try --fallback-calendar-position{bottom:anchor(top);top:unset;margin-top:10px}

package/styles/components/date-input/date-input.scss

@@ -0,0 +1,67 @@
+@use "../../jkl";
+@use "../../shared/input/shared-input-styles" as shared;
+
+@layer jokul.components {
+    .jkl-date-input {
+        anchor-scope: all;
+
+        &__wrapper {
+            @include shared.wrapper-styles;
+            display: grid;
+            grid-template-columns: 1fr max-content;
+            max-width: 18ch;
+            anchor-name: --calendar-trigger;
+        }
+
+        input[type="date"] {
+            @include shared.input-styles;
+            height: 100%;
+            width: 100%;
+            padding: var(--jkl-unit-15);
+            padding-inline-end: var(--jkl-unit-15);
+            box-sizing: border-box;
+
+            &::-webkit-calendar-picker-indicator,
+            &::-webkit-inner-spin-button {
+                display: none;
+                -webkit-appearance: none;
+            }
+
+            &[data-empty="true"] {
+                color: var(--jkl-color-text-subdued);
+            }
+        }
+
+        .jkl-calendar {
+            border: none;
+            padding: var(--jkl-unit-40);
+            display: none;
+            position: fixed;
+            width: 80svw;
+
+            &:popover-open {
+                display: block;
+            }
+
+            @media screen and (min-width: 600px) {
+                &__labels {
+                    display: none;
+                }
+
+                width: max-content;
+                margin-block: var(--jkl-unit-10);
+                margin-left: 0;
+                position-anchor: --calendar-trigger;
+                top: anchor(bottom);
+                left: anchor(left);
+                position-try-fallbacks: --fallback-calendar-position;
+            }
+        }
+    }
+}
+
+@position-try --fallback-calendar-position {
+    bottom: anchor(top);
+    top: unset;
+    margin-top: 10px;
+}

package/styles/components/description-list/description-list.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-description-list{display:grid;grid-template-columns:1fr;row-gap:var(--jkl-unit-05)}.jkl-description-list .seperator{display:none}.jkl-description-list__detail+.seperator{border:0 solid #0000;grid-column:1/-1;margin-block:var(--jkl-unit-05);width:100%}.jkl-description-list__detail+.seperator:not(:first-of-type){display:unset}.jkl-description-list__term{font-weight:var(--jkl-font-weight-bold)}.jkl-description-list__detail{margin-left:0}@media (min-width:60ch){.jkl-description-list[data-alignment=horizontal]{column-gap:1.5em;grid-auto-flow:column;grid-template-columns:fit-content(40%) 1fr}.jkl-description-list[data-alignment=horizontal] .jkl-description-list__term{grid-column-start:1;margin:0;overflow-wrap:break-word}.jkl-description-list[data-alignment=horizontal] .jkl-description-list__detail{grid-column-start:2}.jkl-description-list[data-alignment=justified]{column-gap:1.5em;grid-auto-flow:column;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.jkl-description-list[data-alignment=justified] .jkl-description-list__term{grid-column-start:1;margin:0;overflow-wrap:break-word}.jkl-description-list[data-alignment=justified] .jkl-description-list__detail{grid-column-start:2;text-align:end}}.jkl-description-list[data-separators=true] .seperator:not(:first-of-type){border-top:1px solid var(--jkl-color-border-subdued);margin-block:var(--jkl-unit-15)}}
+@layer jokul.components{.jkl-description-list{display:grid;grid-template-columns:1fr;row-gap:var(--jkl-unit-05)}.jkl-description-list .seperator{display:none}.jkl-description-list__detail+.seperator{grid-column:1/-1;width:100%;border:0 solid #0000;margin-block:var(--jkl-unit-05)}.jkl-description-list__detail+.seperator:not(:first-of-type){display:unset}.jkl-description-list__term{font-weight:var(--jkl-font-weight-bold)}.jkl-description-list__detail{margin-left:0}@media (min-width:60ch){.jkl-description-list[data-alignment=horizontal]{grid-template-columns:fit-content(40%) 1fr;grid-auto-flow:column;column-gap:1.5em}.jkl-description-list[data-alignment=horizontal] .jkl-description-list__term{grid-column-start:1;margin:0;overflow-wrap:break-word}.jkl-description-list[data-alignment=horizontal] .jkl-description-list__detail{grid-column-start:2}.jkl-description-list[data-alignment=justified]{grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;grid-auto-flow:column;column-gap:1.5em}.jkl-description-list[data-alignment=justified] .jkl-description-list__term{grid-column-start:1;margin:0;overflow-wrap:break-word}.jkl-description-list[data-alignment=justified] .jkl-description-list__detail{grid-column-start:2;text-align:end}}.jkl-description-list[data-separators=true] .seperator:not(:first-of-type){margin-block:var(--jkl-unit-15);border-top:1px solid var(--jkl-color-border-subdued)}}

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-accordion{background-color:var(--jkl-color-background-container);border-radius:var(--jkl-border-radius-s);-webkit-padding-start:unset;list-style-type:unset;overflow:clip;padding-inline-start:unset}.jkl-accordion .jkl-expandable-panel{background-color:initial;border:unset;border-radius:unset}.jkl-accordion .jkl-expandable-panel__wrapper:not(:last-of-type){-webkit-border-after:1px solid var(--jkl-color-border-subdued);border-block-end:1px solid var(--jkl-color-border-subdued)}.jkl-accordion[data-outlined=true]{background-color:initial;border:1px solid var(--jkl-color-border-subdued)}}
+@layer jokul.components{.jkl-accordion{background-color:var(--jkl-color-background-container);border-radius:var(--jkl-border-radius-s);-webkit-padding-start:unset;padding-inline-start:unset;list-style-type:unset;overflow:clip}.jkl-accordion .jkl-expandable-panel{border-radius:unset;border:unset;background-color:initial}.jkl-accordion .jkl-expandable-panel__wrapper:not(:last-of-type){-webkit-border-after:1px solid var(--jkl-color-border-subdued);border-block-end:1px solid var(--jkl-color-border-subdued)}.jkl-accordion[data-outlined=true]{border:1px solid var(--jkl-color-border-subdued);background-color:initial}}

package/styles/components/expander/expandable.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-expandable-panel{background-color:var(--jkl-color-background-container);border:1px solid #0000;border-radius:var(--jkl-border-radius-s);box-sizing:border-box;overflow:hidden;width:100%}@media screen and (forced-colors:active){.jkl-expandable-panel{border:1px solid CanvasText}}.jkl-expandable-panel__content[data-expanded=true]{height:auto}.jkl-expandable-panel__content[data-expanded=false]{height:0}.jkl-expandable-panel[data-visible-content=true] .jkl-expander{border-bottom:1px solid #0000}.jkl-expandable-panel__content-wrapper{padding:var(--jkl-unit-20)}.jkl-expandable-panel--outlined{background-color:initial;border-color:var(--jkl-color-border-subdued)}.jkl-expandable-panel__wrapper{--border-radius:var(--jkl-border-radius-m);--outline-offset:3px;--stroke-outline-offset:3px;position:relative}.jkl-expandable-panel__wrapper+.jkl-expandable-panel__wrapper{--border-top-left-radius:0;--border-top-right-radius:0;--stroke-outline-offset:-1px}.jkl-expandable-panel__wrapper:has(+.jkl-expandable-panel__wrapper){--border-bottom-left-radius:0;--border-bottom-right-radius:0;--stroke-outline-offset:-1px}.jkl-expandable-panel__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable-panel--outlined){--outline-offset:var(--stroke-outline-offset)}.jkl-expandable-panel__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable-panel__focus-container{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px;outline-offset:var(--outline-offset)}.jkl-expandable-panel__wrapper .jkl-expander{padding:var(--jkl-unit-20);width:100%}.jkl-expandable-panel__wrapper .jkl-expander__label{flex-grow:1}@media (hover:hover){.jkl-expandable-panel__wrapper .jkl-expander:hover{background-color:var(--jkl-color-background-container-accent)}}.jkl-expandable-panel__focus-container{inset:0;position:absolute}.jkl-expander{-webkit-appearance:none;appearance:none;background:none;border:none;box-sizing:border-box;color:var(--jkl-color);cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;align-items:center;display:flex;gap:.5rem;list-style:none}.jkl-expander::-webkit-details-marker{display:none}.jkl-expander__chevron{text-align:right;transform:rotate(0turn);transition-property:transform;-webkit-user-select:none;user-select:none}.jkl-expander--open .jkl-expander__label{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-expander--open .jkl-expander__chevron{transform:rotate(-.5turn);transition-duration:var(--jkl-motion-timing-snappy);transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-expander{border-style:none}.jkl-expander,.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-expander{border-style:revert}.jkl-expander,.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:revert;outline-style:revert}}}
+@layer jokul.components{.jkl-expandable-panel{background-color:var(--jkl-color-background-container);border:1px solid #0000;border-radius:var(--jkl-border-radius-s);box-sizing:border-box;width:100%;overflow:hidden}@media screen and (forced-colors:active){.jkl-expandable-panel{border:1px solid CanvasText}}.jkl-expandable-panel__content[data-expanded=true]{height:auto}.jkl-expandable-panel__content[data-expanded=false]{height:0}.jkl-expandable-panel[data-visible-content=true] .jkl-expander{border-bottom:1px solid #0000}.jkl-expandable-panel__content-wrapper{padding:var(--jkl-unit-20)}.jkl-expandable-panel--outlined{border-color:var(--jkl-color-border-subdued);background-color:initial}.jkl-expandable-panel__wrapper{--border-radius:var(--jkl-border-radius-m);--outline-offset:3px;--stroke-outline-offset:3px;position:relative}.jkl-expandable-panel__wrapper+.jkl-expandable-panel__wrapper{--border-top-left-radius:0;--border-top-right-radius:0;--stroke-outline-offset:-1px}.jkl-expandable-panel__wrapper:has(+.jkl-expandable-panel__wrapper){--border-bottom-left-radius:0;--border-bottom-right-radius:0;--stroke-outline-offset:-1px}.jkl-expandable-panel__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable-panel--outlined){--outline-offset:var(--stroke-outline-offset)}.jkl-expandable-panel__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable-panel__focus-container{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px;outline-offset:var(--outline-offset)}.jkl-expandable-panel__wrapper .jkl-expander{padding:var(--jkl-unit-20);width:100%}.jkl-expandable-panel__wrapper .jkl-expander__label{flex-grow:1}@media (hover:hover){.jkl-expandable-panel__wrapper .jkl-expander:hover{background-color:var(--jkl-color-background-container-accent)}}.jkl-expandable-panel__focus-container{position:absolute;inset:0}.jkl-expander{box-sizing:border-box;background:none;-webkit-appearance:none;appearance:none;border:none;text-align:left;cursor:pointer;color:var(--jkl-color);-webkit-tap-highlight-color:transparent;display:flex;gap:.5rem;align-items:center;list-style:none}.jkl-expander::-webkit-details-marker{display:none}.jkl-expander__chevron{-webkit-user-select:none;user-select:none;transition-property:transform;transform:rotate(0turn);text-align:right}.jkl-expander--open .jkl-expander__label{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-expander--open .jkl-expander__chevron{transform:rotate(-.5turn);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-snappy)}.jkl-expander{border-style:none}.jkl-expander,.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-expander{border-style:revert}.jkl-expander,.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:revert;outline-style:revert}}}

package/styles/components/feedback/feedback.css

@@ -20,12 +20,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-ujp1cxs 0.25s ease-out;
+    animation: jkl-show-u5638vc 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-ujp1cxs {
+  @keyframes jkl-show-u5638vc {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;

package/styles/components/feedback/feedback.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:var(--jkl-motion-timing-expressive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-paragraph-small);margin-bottom:var(--jkl-unit-20)}.jkl-feedback__fade-in{animation:jkl-show-ujp1cxs .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-ujp1cxs{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:var(--jkl-spacing-12);justify-content:space-between;margin-top:var(--jkl-unit-10);max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:var(--jkl-motion-timing-productive);transition-property:transform,color;transition-timing-function:var(--jkl-motion-easing-standard);width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{fill:ButtonText;stroke:ButtonFace}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem #0000001a;inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}input:focus-visible+.jkl-feedback-smiley-option{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}
+@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{width:100%;transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive)}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);margin-bottom:var(--jkl-unit-20);font:var(--jkl-text-style-paragraph-small)}.jkl-feedback__fade-in{animation:jkl-show-u5638vc .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-u5638vc{0%{transform:translate3d(0,.5rem,0);opacity:0}}.jkl-feedback-smileys{margin-top:var(--jkl-unit-10);display:flex;justify-content:space-between;width:100%;max-width:22.5rem;flex-wrap:nowrap;gap:var(--jkl-spacing-12)}.jkl-feedback-smiley-option{display:inline-block;position:relative;cursor:pointer;height:2.5rem;width:2.5rem;color:var(--jkl-color-text-subdued);transform:translateZ(0);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:transform,color}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{content:"";position:absolute;border-radius:50%;opacity:0;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity}.jkl-feedback-smiley-option:before{inset:0;box-shadow:0 .125rem 1.875rem #0000001a}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}input:focus-visible+.jkl-feedback-smiley-option{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}

package/styles/components/file/file.css

@@ -4,69 +4,37 @@
 @layer jokul.components {
   .jkl-file {
     --jkl-file-padding: var(--jkl-unit-10);
-    --jkl-file-thumbnail-width: var(--jkl-unit-70);
-    --jkl-file-thumbnail-max-height: var(--jkl-unit-90);
+    --jkl-file-thumbnail-max-height: var(--jkl-unit-210);
+    --jkl-file-thumbnail-width: var(--jkl-unit-60);
     --jkl-file-thumbnail-aspect-ratio: 1;
-    --jkl-file-gap: var(--jkl-unit-10) var(--jkl-unit-20);
+    --jkl-file-gap: var(--jkl-unit-10);
     --jkl-file-button-width: var(--jkl-unit-50);
     --text-color: var(--jkl-color-text-default);
     --border: 1px solid var(--jkl-color-border-subdued);
-    --border-radius: 2px;
+    --border-radius: var(--jkl-border-radius-s);
     --bg: transparent;
     --transition-time: var(--jkl-motion-timing-expressive);
   }
-  .jkl-file__content {
-    transition-timing-function: var(--jkl-motion-easing-standard);
-    transition-duration: var(--jkl-motion-timing-snappy);
-    transition-property: background-color, border-color, color;
-    color: var(--text-color);
-    padding: var(--jkl-file-padding);
-    border: var(--border);
-    border-radius: var(--border-radius);
-    background: var(--bg);
-    display: grid;
-    grid-template-columns: var(--jkl-file-thumbnail-width) 1fr var(--jkl-file-button-width);
-    grid-template-areas: "image text button";
-    gap: var(--jkl-file-gap);
-    align-items: center;
-    height: fit-content;
-  }
-  .jkl-file__content__name {
-    font: var(--jkl-text-style-paragraph-small);
-    grid-area: text;
-    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
-    word-break: break-word;
-  }
-  .jkl-file__content__name__size {
-    word-break: keep-all;
-  }
-  .jkl-file__content__delete {
-    aspect-ratio: 1;
-    grid-area: button;
-  }
-  .jkl-file__content__thumbnail {
-    width: 100%;
+  .jkl-file__thumbnail {
+    flex-shrink: 0;
     aspect-ratio: var(--jkl-file-thumbnail-aspect-ratio);
-    object-fit: cover;
+    width: var(--jkl-file-thumbnail-width);
+    height: auto;
     max-height: var(--jkl-file-thumbnail-max-height);
-    grid-area: image;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--jkl-color-background-page);
-    border-radius: 2px;
+    border-radius: var(--jkl-border-radius-xs);
     overflow: hidden;
-    container-type: inline-size;
     anchor-name: --thumb;
     anchor-scope: all;
     outline: 1px solid color-mix(in srgb, currentColor 3%, transparent);
   }
-  .jkl-file__content__thumbnail::before, .jkl-file__content__thumbnail::after {
+  .jkl-file__thumbnail::after {
     position: absolute;
     z-index: 1;
-  }
-  .jkl-file__content__thumbnail::after {
     content: ""/"Laster opp";
     position-anchor: --thumb;
     position-area: center;
@@ -79,50 +47,71 @@
     transition: display var(--transition-time) allow-discrete ease-in, scale var(--transition-time) ease-in;
   }
   @starting-style {
-    .jkl-file__content__thumbnail::after {
+    .jkl-file__thumbnail::after {
       scale: 0;
     }
   }
-  .jkl-file__content__thumbnail img {
+  .jkl-file__thumbnail img {
     opacity: 1;
     transition: opacity var(--transition-time) ease-in-out;
   }
-  .jkl-file__content__thumbnail img[src] {
-    width: 100%;
-    height: 100%;
+  .jkl-file__thumbnail img[src] {
+    min-width: 100%;
+    min-height: 100%;
     object-fit: cover;
+    object-position: center;
+  }
+  .jkl-file__content {
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-snappy);
+    transition-property: background-color, border-color, color;
+    color: var(--text-color);
+    padding: var(--jkl-file-padding);
+    border: var(--border);
+    border-radius: var(--border-radius);
+    background: var(--bg);
+    height: fit-content;
+  }
+  .jkl-file__content:not(:has(.jkl-file__thumbnail)):has(.jkl-file__button) {
+    --jkl-file-padding: 0 var(--jkl-unit-10);
+  }
+  .jkl-file__info {
+    flex-grow: 999;
+  }
+  .jkl-file__name {
+    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
+    word-break: break-word;
+  }
+  .jkl-file__size {
+    word-break: keep-all;
+  }
+  .jkl-file__button {
+    aspect-ratio: 1;
+    flex-shrink: 0;
   }
   .jkl-file[class*=card] {
     --jkl-file-thumbnail-width: 100%;
-    --jkl-file-thumbnail-aspect-ratio: 16/9;
-  }
-  .jkl-file[class*=card] .jkl-file__content {
-    grid-template-columns: 1fr var(--jkl-file-button-width);
-    grid-template-rows: var(--jkl-file-thumbnail-max-height) auto;
-    grid-template-areas: "image image" "text button";
+    --jkl-file-thumbnail-aspect-ratio: 16/10;
   }
-  .jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src]))::before {
+  .jkl-file:not([data-state*=loading]) .jkl-file__thumbnail:not(:has(img[src]))::before {
     font: var(--jkl-text-style-paragraph-small);
+    position: absolute;
+    z-index: 1;
     content: attr(data-filetype);
   }
-  .jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img {
+  .jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail img {
     opacity: 0;
   }
-  .jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail::after {
+  .jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail::after {
     display: block;
     scale: 1;
   }
-  .jkl-file[data-state=error] {
-    --bg: var(--jkl-color-error-background-container);
-  }
   .jkl-file[data-state=error],
   .jkl-file[data-state=error] a,
   .jkl-file[data-state=error] a:hover,
   .jkl-file[data-state=error] button,
   .jkl-file[data-state=error] span {
     --text-color: var(--jkl-color-error-text-default);
-    --link-color: var(--text-color);
-    --jkl-color-border-strong: currentColor;
   }
   .jkl-file[data-state=error] .jkl-file__content {
     border-color: var(--jkl-color-error-border-default);

package/styles/components/file/file.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--jkl-file-thumbnail-width:var(--jkl-unit-70);--jkl-file-thumbnail-max-height:var(--jkl-unit-90);--jkl-file-thumbnail-aspect-ratio:1;--jkl-file-gap:var(--jkl-unit-10) var(--jkl-unit-20);--jkl-file-button-width:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--border:1px solid var(--jkl-color-border-subdued);--border-radius:2px;--bg:#0000;--transition-time:var(--jkl-motion-timing-expressive)}.jkl-file__content{align-items:center;background:var(--bg);border:var(--border);border-radius:var(--border-radius);color:var(--text-color);display:grid;gap:var(--jkl-file-gap);grid-template-areas:"image text button";grid-template-columns:var(--jkl-file-thumbnail-width) 1fr var(--jkl-file-button-width);height:-webkit-fit-content;height:fit-content;padding:var(--jkl-file-padding);transition-duration:var(--jkl-motion-timing-snappy);transition-property:background-color,border-color,color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-file__content__name{font:var(--jkl-text-style-paragraph-small);grid-area:text;word-break:break-word}.jkl-file__content__name__size{word-break:keep-all}.jkl-file__content__delete{aspect-ratio:1;grid-area:button}.jkl-file__content__thumbnail{align-items:center;anchor-name:--thumb;anchor-scope:all;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);background:var(--jkl-color-background-page);border-radius:2px;container-type:inline-size;display:flex;grid-area:image;justify-content:center;max-height:var(--jkl-file-thumbnail-max-height);object-fit:cover;outline:1px solid color-mix(in srgb,currentColor 3%,#0000);overflow:hidden;position:relative;width:100%}.jkl-file__content__thumbnail:after,.jkl-file__content__thumbnail:before{position:absolute;z-index:1}.jkl-file__content__thumbnail:after{animation:spin 5s linear infinite forwards;aspect-ratio:1;background:var(--text-color);border-radius:1px;content:""/"Laster opp";height:25%;position-anchor:--thumb;position-area:center;scale:0;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in}@starting-style{.jkl-file__content__thumbnail:after{scale:0}}.jkl-file__content__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__content__thumbnail img[src]{height:100%;object-fit:cover;width:100%}.jkl-file[class*=card]{--jkl-file-thumbnail-width:100%;--jkl-file-thumbnail-aspect-ratio:16/9}.jkl-file[class*=card] .jkl-file__content{grid-template-areas:"image image" "text button";grid-template-columns:1fr var(--jkl-file-button-width);grid-template-rows:var(--jkl-file-thumbnail-max-height) auto}.jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src])):before{content:attr(data-filetype);font:var(--jkl-text-style-paragraph-small)}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img{opacity:0}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail:after{display:block;scale:1}.jkl-file[data-state=error]{--bg:var(--jkl-color-error-background-container)}.jkl-file[data-state=error],.jkl-file[data-state=error] a,.jkl-file[data-state=error] a:hover,.jkl-file[data-state=error] button,.jkl-file[data-state=error] span{--text-color:var(--jkl-color-error-text-default);--link-color:var(--text-color);--jkl-color-border-strong:currentColor}.jkl-file[data-state=error] .jkl-file__content{border-color:var(--jkl-color-error-border-default)}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}
+@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--jkl-file-thumbnail-max-height:var(--jkl-unit-210);--jkl-file-thumbnail-width:var(--jkl-unit-60);--jkl-file-thumbnail-aspect-ratio:1;--jkl-file-gap:var(--jkl-unit-10);--jkl-file-button-width:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--border:1px solid var(--jkl-color-border-subdued);--border-radius:var(--jkl-border-radius-s);--bg:#0000;--transition-time:var(--jkl-motion-timing-expressive)}.jkl-file__thumbnail{flex-shrink:0;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);width:var(--jkl-file-thumbnail-width);height:auto;max-height:var(--jkl-file-thumbnail-max-height);position:relative;display:flex;align-items:center;justify-content:center;background:var(--jkl-color-background-page);border-radius:var(--jkl-border-radius-xs);overflow:hidden;anchor-name:--thumb;anchor-scope:all;outline:1px solid color-mix(in srgb,currentColor 3%,#0000)}.jkl-file__thumbnail:after{position:absolute;z-index:1;content:""/"Laster opp";position-anchor:--thumb;position-area:center;height:25%;border-radius:1px;aspect-ratio:1;scale:0;background:var(--text-color);animation:spin 5s linear infinite forwards;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in}@starting-style{.jkl-file__thumbnail:after{scale:0}}.jkl-file__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__thumbnail img[src]{min-width:100%;min-height:100%;object-fit:cover;object-position:center}.jkl-file__content{transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-snappy);transition-property:background-color,border-color,color;color:var(--text-color);padding:var(--jkl-file-padding);border:var(--border);border-radius:var(--border-radius);background:var(--bg);height:-webkit-fit-content;height:fit-content}.jkl-file__content:not(:has(.jkl-file__thumbnail)):has(.jkl-file__button){--jkl-file-padding:0 var(--jkl-unit-10)}.jkl-file__info{flex-grow:999}.jkl-file__name{word-break:break-word}.jkl-file__size{word-break:keep-all}.jkl-file__button{aspect-ratio:1;flex-shrink:0}.jkl-file[class*=card]{--jkl-file-thumbnail-width:100%;--jkl-file-thumbnail-aspect-ratio:16/10}.jkl-file:not([data-state*=loading]) .jkl-file__thumbnail:not(:has(img[src])):before{font:var(--jkl-text-style-paragraph-small);position:absolute;z-index:1;content:attr(data-filetype)}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail img{opacity:0}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail:after{display:block;scale:1}.jkl-file[data-state=error],.jkl-file[data-state=error] a,.jkl-file[data-state=error] a:hover,.jkl-file[data-state=error] button,.jkl-file[data-state=error] span{--text-color:var(--jkl-color-error-text-default)}.jkl-file[data-state=error] .jkl-file__content{border-color:var(--jkl-color-error-border-default)}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}