@fremtind/jokul 4.3.0 → 5.0.0-next.1

package/styles/components/modal/_overlay.scss

@@ -1,20 +0,0 @@
-@use "../../core/jkl";
-
-@layer jokul.components {
-    .jkl-modal-overlay {
-        background-color: rgb(27 25 23 / 80%);
-        opacity: 0;
-
-        @include jkl.motion("entrance", "expressive", opacity);
-    }
-
-    .jkl-modal-container:not([aria-hidden="true"]) .jkl-modal-overlay {
-        opacity: 1;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        .jkl-modal-overlay {
-            transition-duration: 0ms;
-        }
-    }
-}

package/styles/components/modal/_parts.scss

@@ -1,33 +0,0 @@
-@use "../../core/jkl";
-
-@layer jokul.components {
-    .jkl-modal-header {
-        --jkl-modal-header-margin: 0 0 var(--jkl-unit-20);
-
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        margin: var(--jkl-modal-header-margin);
-    }
-
-    .jkl-modal-body {
-        @include jkl.text-style("paragraph-medium");
-    }
-
-    .jkl-modal-title {
-        @include jkl.text-style("heading-3");
-    }
-
-    .jkl-modal-actions {
-        margin-block-start: var(--jkl-unit-50);
-        display: flex;
-        flex-direction: column;
-        gap: var(--jkl-unit-15) var(--jkl-unit-20);
-
-        @container (width > 35ch /* ~380px ved vanlig zoom/size */) {
-            flex-direction: row-reverse;
-            align-self: flex-end;
-        }
-    }
-}

package/styles/components/modal/_placement.scss

@@ -1,59 +0,0 @@
-@use "../../core/jkl";
-
-@layer jokul.components {
-    /* Placement: bottom */
-    .jkl-modal-container--placement-bottom {
-        align-items: flex-end;
-
-        &.jkl-modal-container--slide-in {
-            --jkl-modal-slide-x: 0px;
-            --jkl-modal-slide-y: 24px;
-        }
-
-        .jkl-modal {
-            --margin: 0px;
-
-            width: min(100vw, var(--modal-width, 100vw));
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-    }
-
-    /* Placement: left */
-    .jkl-modal-container--placement-left {
-        justify-content: flex-start;
-
-        &.jkl-modal-container--slide-in {
-            --jkl-modal-slide-x: -24px;
-            --jkl-modal-slide-y: 0px;
-        }
-
-        .jkl-modal {
-            height: 100%;
-            max-height: 100%;
-            margin-block: 0;
-            margin-inline-start: 0;
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
-    }
-
-    /* Placement: right */
-    .jkl-modal-container--placement-right {
-        justify-content: flex-end;
-
-        &.jkl-modal-container--slide-in {
-            --jkl-modal-slide-x: 24px;
-            --jkl-modal-slide-y: 0px;
-        }
-
-        .jkl-modal {
-            height: 100%;
-            max-height: 100%;
-            margin-block: 0;
-            margin-inline-end: 0;
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-    }
-}

package/styles/components-beta/nav-link/navlink.min.css

@@ -1 +0,0 @@
-.jkl-navlink--beta{--border-radius:4px;--separator:1px solid var(--jkl-color-border-separator);align-items:center;background-color:var(--jkl-color-background-container-low);border-radius:0;color:inherit;column-gap:2em;display:grid;font-size:var(--jkl-font-size-3);font-weight:400;grid-template-columns:1fr auto;line-height:var(--jkl-line-height-relaxed);padding:var(--jkl-spacing-s);text-decoration:none;--jkl-icon-weight:300;transition-duration:.15s;transition-property:background-color;transition-timing-function:cubic-bezier(0,0,.375,1.17)}.jkl-navlink--beta .description,.jkl-navlink--beta .title{grid-column:1}.jkl-navlink--beta:has(.description) .title{font-weight:700}.jkl-navlink--beta:after{content:"arrow_forward"/"";display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);grid-column:2;grid-row:1/span 999;line-height:1;translate:0;-webkit-font-smoothing:antialiased;transition-duration:75ms;transition-duration:.15s;transition-property:font-variation-settings,transform;transition-property:translate;transition-timing-function:ease;transition-timing-function:cubic-bezier(0,0,.375,1.17)}.jkl-navlink--beta:focus-visible,.jkl-navlink--beta:hover{background-color:var(--jkl-color-background-interactive-selected)}.jkl-navlink--beta:focus-visible:after,.jkl-navlink--beta:hover:after{translate:4px 0}.jkl-navlink--beta:first-of-type{border-start-end-radius:var(--border-radius);border-start-start-radius:var(--border-radius)}.jkl-navlink--beta:last-of-type{border-end-end-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}.jkl-navlink--beta:has(+.jkl-navlink--beta){-webkit-border-after:var(--separator);border-block-end:var(--separator)}

package/styles/components-beta/select/_index.scss

@@ -1,3 +0,0 @@
-@forward "select";
-@use "../../components/icon/index" as icon;
-@use "../../components/input-group/index" as input-group;

package/styles/components-beta/select/select.min.css

@@ -1 +0,0 @@
-.jkl-select--beta{--border-color:var(--jkl-color-border-input);--background-color:transparent;--color:var(--jkl-color-text-default);--box-shadow:0 0 0 jkl.rem(1px) transparent;--border-width:0.0625rem;--button-padding:calc(var(--jkl-unit-15) - var(--border-width));--arrow-right:calc(var(--jkl-unit-base)*0.25);border-style:none;display:block;outline:0;outline-style:none;position:relative}.jkl-select--beta:active,.jkl-select--beta:focus,.jkl-select--beta:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-select--beta{border-style:revert;outline:revert;outline-style:revert}.jkl-select--beta:active,.jkl-select--beta:focus,.jkl-select--beta:hover{outline:revert;outline-style:revert}}.jkl-select--beta :focus-visible{outline:none}.jkl-select--beta .jkl-tooltip-question-button:focus{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-select--beta-wrapper{align-items:center;display:grid;grid-template-columns:1fr auto}.jkl-select--beta .jkl-icon,.jkl-select--beta select{grid-row:1}.jkl-select--beta select{background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);padding:var(--button-padding);-webkit-padding-end:calc(var(--button-padding) + 1.3em);-webkit-appearance:none;appearance:none;border:var(--border-width) solid var(--border-color);border-radius:var(--jkl-border-radius-s);cursor:pointer;grid-column:1/-1;height:var(--input-height);overflow:hidden;padding-inline-end:calc(var(--button-padding) + 1.3em);text-align:left;text-overflow:ellipsis;transition-property:color,border-color,box-shadow;white-space:nowrap;width:100%}.jkl-select--beta select:has(option:checked[value=""]){--color:var(--jkl-color-text-subdued)}.jkl-select--beta select:hover{--border-color:var(--jkl-color-border-input-focus);--box-shadow:0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus)}.jkl-select--beta select:invalid{--background-color:var(--jkl-color-background-alert-error);--color:var(--jkl-color-text-on-alert-subdued)}.jkl-select--beta select:focus-visible{outline:none}.jkl-select--beta select{font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);transition-duration:.15s;transition-timing-function:ease;--jkl-icon-weight:300}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible) select{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-select--beta .jkl-icon{grid-column:2;pointer-events:none;-webkit-padding-end:var(--button-padding);padding-inline-end:var(--button-padding)}