@fremtind/jokul 5.2.3 → 6.0.0-next.1

package/styles/components/datepicker/_calendar-navigation-dropdown.scss

@@ -1,55 +0,0 @@
-@use "../../jkl";
-
-@layer jokul.components {
-    .jkl-calendar-navigation-dropdown {
-        // Størrelsen til medium ikon
-        --chevron-size: #{jkl.rem(24px)};
-
-        display: inline-flex;
-        align-items: center;
-
-        & > * {
-            cursor: pointer;
-        }
-
-        &__select {
-            appearance: none;
-
-            @include jkl.text-style("text-small") {
-                font-weight: jkl.$font-weight-bold;
-            }
-
-            background-color: transparent;
-            color: inherit;
-            border-radius: 0;
-            border: none;
-            text-align: end;
-            text-align-last: end;
-            height: jkl.rem(40px);
-            margin: 0;
-            padding: 0;
-            padding-inline-end: var(--chevron-size);
-
-            @include jkl.reset-outline;
-
-            & option {
-                color: var(--jkl-color-text-default);
-                background-color: var(--jkl-color-background-container);
-                text-align: left;
-            }
-
-            &:focus-visible {
-                @include jkl.focus-outline;
-            }
-        }
-
-        &__chevron {
-            margin-left: calc(var(--chevron-size) * -1);
-            pointer-events: none;
-        }
-
-        & + & {
-            margin-inline-start: var(--jkl-unit-10);
-        }
-    }
-}

package/styles/components/datepicker/_calendar-navigation.scss

@@ -1,14 +0,0 @@
-@use "../../jkl";
-
-@layer jokul.components {
-    .jkl-calendar-navigation {
-        border: 0;
-        padding: 0;
-        margin: 0;
-        display: flex;
-        box-sizing: border-box;
-        width: 100%;
-        justify-content: space-between;
-        align-items: center;
-    }
-}

package/styles/components/datepicker/_calendar-table.scss

@@ -1,29 +0,0 @@
-@use "../../jkl";
-
-@layer jokul.components {
-    .jkl-calendar-table {
-        // Calendar table heading (weekday names)
-        // ======================================
-
-        th {
-            @include jkl.text-style("text-small");
-            padding-bottom: var(--jkl-unit-10);
-        }
-
-        // Calendar table styles
-        // =====================
-
-        td {
-            text-align: center;
-        }
-
-        td + td,
-        th + th {
-            padding-left: calc(var(--jkl-unit-10) / 2);
-        }
-
-        tr + tr > td {
-            padding-top: calc(var(--jkl-unit-10) / 2); // space between rows
-        }
-    }
-}

package/styles/components/datepicker/_calendar.scss

@@ -1,28 +0,0 @@
-@use "../../jkl";
-
-@layer jokul.components {
-    .jkl-calendar {
-        --jkl-calendar-padding: var(--jkl-unit-15) var(--jkl-unit-20) var(--jkl-unit-20);
-        --jkl-calendar-gap: var(--jkl-unit-15);
-
-        // Custom tweaks for iPhone SE
-        @include jkl.screen-to(375px) {
-            --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20);
-        }
-
-        display: block;
-        background-color: var(--jkl-color-background-container);
-        color: var(--jkl-color);
-
-        &__padding {
-            display: flex;
-            flex-direction: column;
-            gap: var(--jkl-calendar-gap);
-            box-sizing: border-box;
-
-            @include jkl.forced-colors-mode {
-                border: 1px solid CanvasText;
-            }
-        }
-    }
-}

package/styles/components/datepicker/_index.scss

@@ -1,6 +0,0 @@
-@forward "datepicker";
-@use "../button" as button;
-@use "../icon" as icon;
-@use "../input-group" as input-group;
-@use "../text-input" as text-input;
-@use "../popover" as popover;

package/styles/components/datepicker/datepicker.css

@@ -1,246 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-@layer jokul.components {
-  .jkl-calendar {
-    --jkl-calendar-padding: var(--jkl-unit-15) var(--jkl-unit-20) var(--jkl-unit-20);
-    --jkl-calendar-gap: var(--jkl-unit-15);
-  }
-  @media (width >= 0) and (max-width: 374px) {
-    .jkl-calendar {
-      --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20);
-    }
-  }
-  .jkl-calendar {
-    display: block;
-    background-color: var(--jkl-color-background-container);
-    color: var(--jkl-color);
-  }
-  .jkl-calendar__padding {
-    display: flex;
-    flex-direction: column;
-    gap: var(--jkl-calendar-gap);
-    box-sizing: border-box;
-  }
-  @media screen and (forced-colors: active) {
-    .jkl-calendar__padding {
-      border: 1px solid CanvasText;
-    }
-  }
-}
-@layer jokul.components {
-  .jkl-calendar-navigation {
-    border: 0;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    box-sizing: border-box;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-  }
-}
-@layer jokul.components {
-  .jkl-calendar-navigation-dropdown {
-    --chevron-size: 1.5rem;
-    display: inline-flex;
-    align-items: center;
-  }
-  .jkl-calendar-navigation-dropdown > * {
-    cursor: pointer;
-  }
-  .jkl-calendar-navigation-dropdown__select {
-    appearance: none;
-    font: var(--jkl-text-style-text-small);
-    font-weight: var(--jkl-font-weight-bold);
-    background-color: transparent;
-    color: inherit;
-    border-radius: 0;
-    border: none;
-    text-align: end;
-    text-align-last: end;
-    height: 2.5rem;
-    margin: 0;
-    padding: 0;
-    padding-inline-end: var(--chevron-size);
-  }
-  .jkl-calendar-navigation-dropdown__select {
-    outline: 0;
-    border-style: none;
-    outline-style: none;
-  }
-  .jkl-calendar-navigation-dropdown__select:active, .jkl-calendar-navigation-dropdown__select:hover, .jkl-calendar-navigation-dropdown__select:focus {
-    outline: 0;
-    outline-style: none;
-  }
-  @media screen and (forced-colors: active) {
-    .jkl-calendar-navigation-dropdown__select {
-      outline: revert;
-      border-style: revert;
-      outline-style: revert;
-    }
-    .jkl-calendar-navigation-dropdown__select:active, .jkl-calendar-navigation-dropdown__select:hover, .jkl-calendar-navigation-dropdown__select:focus {
-      outline: revert;
-      outline-style: revert;
-    }
-  }
-  .jkl-calendar-navigation-dropdown__select option {
-    color: var(--jkl-color-text-default);
-    background-color: var(--jkl-color-background-container);
-    text-align: left;
-  }
-  .jkl-calendar-navigation-dropdown__select:focus-visible {
-    outline: 3px solid var(--jkl-color-border-strong);
-    outline-offset: 3px;
-  }
-  .jkl-calendar-navigation-dropdown__chevron {
-    margin-left: calc(var(--chevron-size) * -1);
-    pointer-events: none;
-  }
-  .jkl-calendar-navigation-dropdown + .jkl-calendar-navigation-dropdown {
-    margin-inline-start: var(--jkl-unit-10);
-  }
-}
-@layer jokul.components {
-  .jkl-calendar-table th {
-    font: var(--jkl-text-style-text-small);
-    padding-bottom: var(--jkl-unit-10);
-  }
-  .jkl-calendar-table td {
-    text-align: center;
-  }
-  .jkl-calendar-table td + td,
-  .jkl-calendar-table th + th {
-    padding-left: calc(var(--jkl-unit-10) / 2);
-  }
-  .jkl-calendar-table tr + tr > td {
-    padding-top: calc(var(--jkl-unit-10) / 2);
-  }
-}
-@layer jokul.components {
-  .jkl-calendar-date-button {
-    --jkl-calendar-date-size: var(--jkl-unit-50);
-  }
-  @media (width >= 0) and (max-width: 374px) {
-    .jkl-calendar-date-button {
-      --jkl-calendar-date-size: var(--jkl-unit-40);
-    }
-  }
-  .jkl-calendar-date-button {
-    font: var(--jkl-text-style-text-small);
-    appearance: none;
-    position: relative;
-    box-sizing: border-box;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    height: var(--jkl-calendar-date-size);
-    width: var(--jkl-calendar-date-size);
-    border-radius: 50%;
-    background-color: transparent;
-    color: var(--jkl-color);
-    margin: var(--jkl-calendar-date-margin);
-    padding: 0;
-    padding-top: var(--jkl-unit-02);
-    transition-timing-function: var(--jkl-motion-easing-entrance);
-    transition-duration: var(--jkl-motion-timing-energetic);
-    transition-property: color, background-color, box-shadow;
-  }
-  .jkl-calendar-date-button {
-    outline: 0;
-    border-style: none;
-    outline-style: none;
-  }
-  .jkl-calendar-date-button:active, .jkl-calendar-date-button:hover, .jkl-calendar-date-button:focus {
-    outline: 0;
-    outline-style: none;
-  }
-  @media screen and (forced-colors: active) {
-    .jkl-calendar-date-button {
-      outline: revert;
-      border-style: revert;
-      outline-style: revert;
-    }
-    .jkl-calendar-date-button:active, .jkl-calendar-date-button:hover, .jkl-calendar-date-button:focus {
-      outline: revert;
-      outline-style: revert;
-    }
-  }
-  .jkl-calendar-date-button[data-adjacent=true] {
-    font: var(--jkl-text-style-text-small);
-    padding: 0;
-    color: var(--jkl-color-text-subdued);
-  }
-  .jkl-calendar-date-button[aria-current=date] {
-    font-weight: var(--jkl-font-weight-bold);
-  }
-  .jkl-calendar-date-button:hover:not(:disabled) {
-    background-color: color-mix(in srgb, currentColor 10%, transparent);
-  }
-  .jkl-calendar-date-button[aria-pressed=true] {
-    background-color: var(--jkl-color-background-contrast);
-    color: var(--jkl-color-text-on-contrast);
-  }
-  .jkl-calendar-date-button[aria-pressed=true]:hover {
-    color: var(--jkl-color);
-  }
-  .jkl-calendar-date-button:disabled {
-    color: color(from var(--jkl-color-text-subdued) srgb r g b/70%);
-  }
-  .jkl-calendar-date-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-strong);
-    outline-offset: 3px;
-  }
-}
-@layer jokul.components {
-  .jkl-datepicker {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  .jkl-datepicker {
-    outline: 0;
-    border-style: none;
-    outline-style: none;
-  }
-  .jkl-datepicker:active, .jkl-datepicker:hover, .jkl-datepicker:focus {
-    outline: 0;
-    outline-style: none;
-  }
-  @media screen and (forced-colors: active) {
-    .jkl-datepicker {
-      outline: revert;
-      border-style: revert;
-      outline-style: revert;
-    }
-    .jkl-datepicker:active, .jkl-datepicker:hover, .jkl-datepicker:focus {
-      outline: revert;
-      outline-style: revert;
-    }
-  }
-  .jkl-datepicker__input-wrapper {
-    position: relative;
-    display: contents;
-  }
-  .jkl-datepicker .jkl-datepicker__input {
-    padding-top: calc(var(--jkl-text-input-vertical-padding) + 0.08em);
-    padding-bottom: calc(var(--jkl-text-input-vertical-padding) - 0.08em);
-  }
-  .jkl-datepicker__calendar-wrapper {
-    position: absolute;
-    top: calc(100% + 0.875rem);
-    left: 0;
-    z-index: 7000;
-  }
-  @media (width >= 0) and (max-width: 679px) {
-    .jkl-datepicker__calendar-wrapper {
-      left: -1.15rem;
-    }
-  }
-  @media (width >= 0) and (max-width: 374px) {
-    .jkl-datepicker__calendar-wrapper {
-      left: -2.5rem;
-    }
-  }
-}

package/styles/components/datepicker/datepicker.min.css

@@ -1 +0,0 @@
-@layer jokul.components{.jkl-calendar{--jkl-calendar-padding:var(--jkl-unit-15) var(--jkl-unit-20) var(--jkl-unit-20);--jkl-calendar-gap:var(--jkl-unit-15)}@media (width >= 0) and (max-width:374px){.jkl-calendar{--jkl-calendar-padding:var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20)}}.jkl-calendar{background-color:var(--jkl-color-background-container);color:var(--jkl-color);display:block}.jkl-calendar__padding{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--jkl-calendar-gap)}@media screen and (forced-colors:active){.jkl-calendar__padding{border:1px solid CanvasText}}}@layer jokul.components{.jkl-calendar-navigation{align-items:center;border:0;box-sizing:border-box;display:flex;justify-content:space-between;margin:0;padding:0;width:100%}.jkl-calendar-navigation-dropdown{--chevron-size:1.5rem;align-items:center;display:inline-flex}.jkl-calendar-navigation-dropdown>*{cursor:pointer}.jkl-calendar-navigation-dropdown__select{-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:0;color:inherit;font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);height:2.5rem;margin:0;padding:0;text-align:end;text-align-last:end;-webkit-padding-end:var(--chevron-size);border-style:none;outline:0;outline-style:none;padding-inline-end:var(--chevron-size)}.jkl-calendar-navigation-dropdown__select:active,.jkl-calendar-navigation-dropdown__select:focus,.jkl-calendar-navigation-dropdown__select:hover{outline:0;outline-style:none}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-calendar-navigation-dropdown__select{border-style:revert;outline:revert;outline-style:revert}.jkl-calendar-navigation-dropdown__select:active,.jkl-calendar-navigation-dropdown__select:focus,.jkl-calendar-navigation-dropdown__select:hover{outline:revert;outline-style:revert}}.jkl-calendar-navigation-dropdown__select option{background-color:var(--jkl-color-background-container);color:var(--jkl-color-text-default);text-align:left}.jkl-calendar-navigation-dropdown__select:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-calendar-navigation-dropdown__chevron{margin-left:calc(var(--chevron-size)*-1);pointer-events:none}.jkl-calendar-navigation-dropdown+.jkl-calendar-navigation-dropdown{-webkit-margin-start:var(--jkl-unit-10);margin-inline-start:var(--jkl-unit-10)}.jkl-calendar-table th{font:var(--jkl-text-style-text-small);padding-bottom:var(--jkl-unit-10)}.jkl-calendar-table td{text-align:center}.jkl-calendar-table td+td,.jkl-calendar-table th+th{padding-left:calc(var(--jkl-unit-10)/2)}.jkl-calendar-table tr+tr>td{padding-top:calc(var(--jkl-unit-10)/2)}.jkl-calendar-date-button{--jkl-calendar-date-size:var(--jkl-unit-50)}}@layer jokul.components{}@layer jokul.components{@media (width >= 0) and (max-width:374px){.jkl-calendar-date-button{--jkl-calendar-date-size:var(--jkl-unit-40)}}.jkl-calendar-date-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border-radius:50%;border-style:none;box-sizing:border-box;color:var(--jkl-color);display:inline-flex;font:var(--jkl-text-style-text-small);height:var(--jkl-calendar-date-size);justify-content:center;margin:var(--jkl-calendar-date-margin);padding:0;padding-top:var(--jkl-unit-02);position:relative;transition-duration:var(--jkl-motion-timing-energetic);transition-property:color,background-color,box-shadow;transition-timing-function:var(--jkl-motion-easing-entrance);width:var(--jkl-calendar-date-size)}.jkl-calendar-date-button,.jkl-calendar-date-button:active,.jkl-calendar-date-button:focus,.jkl-calendar-date-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-calendar-date-button{border-style:revert}.jkl-calendar-date-button,.jkl-calendar-date-button:active,.jkl-calendar-date-button:focus,.jkl-calendar-date-button:hover{outline:revert;outline-style:revert}}.jkl-calendar-date-button[data-adjacent=true]{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);padding:0}.jkl-calendar-date-button[aria-current=date]{font-weight:var(--jkl-font-weight-bold)}.jkl-calendar-date-button:hover:not(:disabled){background-color:color-mix(in srgb,currentColor 10%,#0000)}.jkl-calendar-date-button[aria-pressed=true]{background-color:var(--jkl-color-background-contrast);color:var(--jkl-color-text-on-contrast)}.jkl-calendar-date-button[aria-pressed=true]:hover{color:var(--jkl-color)}.jkl-calendar-date-button:disabled{color:color(from var(--jkl-color-text-subdued) srgb r g b/70%)}.jkl-calendar-date-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}@layer jokul.components{.jkl-datepicker{align-items:flex-start;border-style:none;display:flex;flex-direction:column;position:relative}.jkl-datepicker,.jkl-datepicker:active,.jkl-datepicker:focus,.jkl-datepicker:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-datepicker{border-style:revert}.jkl-datepicker,.jkl-datepicker:active,.jkl-datepicker:focus,.jkl-datepicker:hover{outline:revert;outline-style:revert}}.jkl-datepicker__input-wrapper{display:contents;position:relative}.jkl-datepicker .jkl-datepicker__input{padding-bottom:calc(var(--jkl-text-input-vertical-padding) - .08em);padding-top:calc(var(--jkl-text-input-vertical-padding) + .08em)}.jkl-datepicker__calendar-wrapper{left:0;position:absolute;top:calc(100% + .875rem);z-index:7000}@media (width >= 0) and (max-width:679px){.jkl-datepicker__calendar-wrapper{left:-1.15rem}}@media (width >= 0) and (max-width:374px){.jkl-datepicker__calendar-wrapper{left:-2.5rem}}}

package/styles/components/datepicker/datepicker.scss

@@ -1,49 +0,0 @@
-@charset "UTF-8";
-@use "calendar";
-@use "calendar-navigation";
-@use "calendar-navigation-dropdown";
-@use "calendar-table";
-@use "calendar-date-button";
-@use "../../jkl";
-
-@layer jokul.components {
-    .jkl-datepicker {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-
-        @include jkl.reset-outline;
-
-        &__input-wrapper {
-            position: relative;
-            display: contents;
-        }
-
-        & &__input {
-            // Juster padding for bedre balanse når det vises tall
-            padding-top: calc(var(--jkl-text-input-vertical-padding) + 0.08em);
-            padding-bottom: calc(var(--jkl-text-input-vertical-padding) - 0.08em);
-        }
-
-        &__calendar-wrapper {
-            position: absolute;
-            top: calc(100% + #{jkl.rem(14px)});
-            left: 0;
-            z-index: jkl.$z-index--dropdown;
-        }
-
-        @include jkl.small-device {
-            &__calendar-wrapper {
-                left: -1.15rem;
-            }
-        }
-
-        // Custom tweaks for iPhone SE
-        @include jkl.screen-to(375px) {
-            &__calendar-wrapper {
-                left: -2.5rem;
-            }
-        }
-    }
-}