@fremtind/jokul 0.8.1 → 0.10.0

package/src/components/datepicker/styles/datepicker.css

@@ -0,0 +1,453 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-calendar-text-color: #1b1917;
+    --jkl-calendar-background-color: #ffffff;
+    --jkl-calendar-border-color: #1b1917;
+    --jkl-calendar-focus-color: #1b1917;
+  }
+}
+[data-theme=light] {
+  --jkl-calendar-text-color: #1b1917;
+  --jkl-calendar-background-color: #ffffff;
+  --jkl-calendar-border-color: #1b1917;
+  --jkl-calendar-focus-color: #1b1917;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-calendar-text-color: #f9f9f9;
+    --jkl-calendar-background-color: #313030;
+    --jkl-calendar-border-color: #f9f9f9;
+    --jkl-calendar-focus-color: #f9f9f9;
+  }
+}
+[data-theme=dark] {
+  --jkl-calendar-text-color: #f9f9f9;
+  --jkl-calendar-background-color: #313030;
+  --jkl-calendar-border-color: #f9f9f9;
+  --jkl-calendar-focus-color: #f9f9f9;
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-calendar-padding: var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-16);
+  --jkl-calendar-gap: var(--jkl-spacing-12);
+}
+@media (width >= 0) and (max-width: 374px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8) var(--jkl-spacing-16);
+  }
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8) var(--jkl-spacing-16);
+  --jkl-calendar-gap: 0;
+}
+
+.jkl-calendar {
+  display: block;
+  background-color: var(--jkl-calendar-background-color);
+  color: var(--jkl-calendar-text-color);
+  border-radius: 3px;
+  box-shadow: inset 0 0 0 0.0625rem var(--jkl-calendar-border-color), 0 0 0 0.0625rem var(--jkl-calendar-border-color), 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.24);
+}
+.jkl-calendar--hidden {
+  display: none;
+}
+.jkl-calendar::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 5.75rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  transform: translate(-50%, -50%) rotate(-45deg);
+  background-color: var(--jkl-calendar-background-color);
+  border-top: 0.125rem solid var(--jkl-calendar-border-color);
+  border-right: 0.125rem solid var(--jkl-calendar-border-color);
+}
+.jkl-calendar__padding {
+  padding: var(--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;
+  }
+}
+
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-calendar-disabled-day-color: #c8c5c3;
+    --jkl-calendar-navigation-arrow-focus-color: #636060;
+  }
+}
+[data-theme=light] {
+  --jkl-calendar-disabled-day-color: #c8c5c3;
+  --jkl-calendar-navigation-arrow-focus-color: #636060;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-calendar-disabled-day-color: #636060;
+    --jkl-calendar-navigation-arrow-focus-color: #c8c5c3;
+  }
+}
+[data-theme=dark] {
+  --jkl-calendar-disabled-day-color: #636060;
+  --jkl-calendar-navigation-arrow-focus-color: #c8c5c3;
+}
+
+.jkl-calendar-navigation {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+.jkl-calendar-navigation__arrow {
+  display: inline-flex;
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  margin-left: -0.5rem;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  color: var(--jkl-calendar-text-color);
+  width: 2.5rem;
+  height: 2.5rem;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-calendar-navigation__arrow:active, .jkl-calendar-navigation__arrow:hover, .jkl-calendar-navigation__arrow:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-calendar-navigation__arrow {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-calendar-navigation__arrow:active, .jkl-calendar-navigation__arrow:hover, .jkl-calendar-navigation__arrow:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-calendar-navigation__arrow:hover {
+  color: var(--jkl-calendar-navigation-arrow-focus-color);
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navigation__arrow:focus {
+  outline: 0.125rem solid var(--jkl-calendar-focus-color);
+  outline-offset: -0.125rem;
+}
+
+.jkl-calendar-navigation__arrow:disabled {
+  color: var(--jkl-calendar-disabled-day-color);
+}
+
+.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-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+  font-weight: 700;
+  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);
+  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-select-text-color);
+  background-color: var(--jkl-select-open-background-color);
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navigation-dropdown__select:focus {
+  outline: 0.125rem solid var(--jkl-calendar-focus-color);
+  outline-offset: 1px;
+}
+
+.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-spacing-8);
+}
+
+.jkl-calendar-table th {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+  padding-bottom: var(--jkl-spacing-8);
+}
+.jkl-calendar-table td {
+  text-align: center;
+}
+.jkl-calendar-table td + td,
+.jkl-calendar-table th + th {
+  padding-left: 0.25rem;
+}
+.jkl-calendar-table tr + tr > td {
+  padding-top: 0.25rem;
+}
+
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-calendar-adjacent-month-color: #636060;
+    --jkl-calendar-disabled-day-color: #c8c5c3;
+    --jkl-calendar-active-day-color: #ffffff;
+    --jkl-calendar-hover-date-background-color: #ece9e5;
+    --jkl-calendar-selected-date-background-color: #1b1917;
+  }
+}
+[data-theme=light] {
+  --jkl-calendar-adjacent-month-color: #636060;
+  --jkl-calendar-disabled-day-color: #c8c5c3;
+  --jkl-calendar-active-day-color: #ffffff;
+  --jkl-calendar-hover-date-background-color: #ece9e5;
+  --jkl-calendar-selected-date-background-color: #1b1917;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-calendar-adjacent-month-color: #c8c5c3;
+    --jkl-calendar-disabled-day-color: #636060;
+    --jkl-calendar-active-day-color: #000000;
+    --jkl-calendar-hover-date-background-color: #636060;
+    --jkl-calendar-selected-date-background-color: #f9f9f9;
+  }
+}
+[data-theme=dark] {
+  --jkl-calendar-adjacent-month-color: #c8c5c3;
+  --jkl-calendar-disabled-day-color: #636060;
+  --jkl-calendar-active-day-color: #000000;
+  --jkl-calendar-hover-date-background-color: #636060;
+  --jkl-calendar-selected-date-background-color: #f9f9f9;
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-calendar-date-size: 2.375rem;
+  --jkl-calendar-date-font-size: var(--jkl-body-font-size);
+  --jkl-calendar-date-line-height: var(--jkl-body-line-height);
+  --jkl-calendar-date-font-weight: var(--jkl-body-font-weight);
+}
+@media (width >= 0) and (max-width: 679px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-calendar-date-size: 2.25rem;
+    --jkl-calendar-date-font-size: var(--jkl-small-font-size);
+    --jkl-calendar-date-line-height: var(--jkl-small-line-height);
+    --jkl-calendar-date-font-weight: var(--jkl-small-font-weight);
+  }
+}
+@media (width >= 0) and (max-width: 374px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-calendar-date-size: 2rem;
+  }
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-calendar-date-size: 2rem;
+  --jkl-calendar-date-font-size: var(--jkl-small-font-size);
+  --jkl-calendar-date-line-height: var(--jkl-small-line-height);
+  --jkl-calendar-date-font-weight: var(--jkl-small-font-weight);
+}
+
+.jkl-calendar-date-button {
+  font-size: var(--jkl-calendar-date-font-size);
+  line-height: var(--jkl-calendar-date-line-height);
+  font-weight: var(--jkl-calendar-date-font-weight);
+  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-calendar-text-color);
+  margin: var(--jkl-calendar-date-margin);
+  padding: 0;
+  padding-top: 0.125rem;
+  transition-timing-function: ease-out;
+  transition-duration: 75ms;
+  transition-property: color, background-color, box-shadow;
+  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-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+  padding: 0;
+  color: var(--jkl-calendar-adjacent-month-color);
+}
+.jkl-calendar-date-button[aria-current=date] {
+  font-weight: 700;
+}
+.jkl-calendar-date-button:hover:not(:disabled) {
+  background-color: var(--jkl-calendar-hover-date-background-color);
+  cursor: pointer;
+}
+.jkl-calendar-date-button[aria-pressed=true] {
+  background-color: var(--jkl-calendar-selected-date-background-color);
+  color: var(--jkl-calendar-active-day-color);
+  cursor: pointer;
+}
+.jkl-calendar-date-button[aria-pressed=true]:hover {
+  color: var(--jkl-calendar-text-color);
+}
+.jkl-calendar-date-button:disabled {
+  color: var(--jkl-calendar-disabled-day-color);
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-date-button:focus {
+  outline: 0.125rem solid var(--jkl-calendar-focus-color);
+  outline-offset: 0.125rem;
+}
+
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-datepicker-focus-color: #1b1917;
+  }
+}
+[data-theme=light] {
+  --jkl-datepicker-focus-color: #1b1917;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-datepicker-focus-color: #f9f9f9;
+  }
+}
+[data-theme=dark] {
+  --jkl-datepicker-focus-color: #f9f9f9;
+}
+
+.jkl-datepicker {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  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;
+}
+.jkl-datepicker--open .jkl-text-input-wrapper {
+  box-shadow: inset 0 0 0 0.0625rem var(--jkl-text-input-focus-color), 0 0 0 0.0625rem var(--jkl-text-input-focus-color);
+  border-color: var(--jkl-text-input-focus-color);
+}
+@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/src/components/datepicker/styles/datepicker.min.css

@@ -0,0 +1 @@
+@media screen and (prefers-color-scheme:light){:root{--jkl-calendar-text-color:#1b1917;--jkl-calendar-background-color:#fff;--jkl-calendar-border-color:#1b1917;--jkl-calendar-focus-color:#1b1917}}[data-theme=light]{--jkl-calendar-text-color:#1b1917;--jkl-calendar-background-color:#fff;--jkl-calendar-border-color:#1b1917;--jkl-calendar-focus-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-calendar-text-color:#f9f9f9;--jkl-calendar-background-color:#313030;--jkl-calendar-border-color:#f9f9f9;--jkl-calendar-focus-color:#f9f9f9}}[data-theme=dark]{--jkl-calendar-text-color:#f9f9f9;--jkl-calendar-background-color:#313030;--jkl-calendar-border-color:#f9f9f9;--jkl-calendar-focus-color:#f9f9f9}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-calendar-padding:var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-16);--jkl-calendar-gap:var(--jkl-spacing-12)}@media (width >= 0) and (max-width:374px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-calendar-padding:var(--jkl-spacing-4) var(--jkl-spacing-8) var(--jkl-spacing-16)}}[data-density=compact],[data-layout-density=compact]{--jkl-calendar-padding:var(--jkl-spacing-4) var(--jkl-spacing-8) var(--jkl-spacing-16);--jkl-calendar-gap:0}.jkl-calendar{background-color:var(--jkl-calendar-background-color);border-radius:3px;box-shadow:inset 0 0 0 .0625rem var(--jkl-calendar-border-color),0 0 0 .0625rem var(--jkl-calendar-border-color),.125rem .25rem 1rem #0000003d;color:var(--jkl-calendar-text-color);display:block}.jkl-calendar--hidden{display:none}.jkl-calendar:before{background-color:var(--jkl-calendar-background-color);border-right:.125rem solid var(--jkl-calendar-border-color);border-top:.125rem solid var(--jkl-calendar-border-color);content:"";height:.75rem;left:5.75rem;position:absolute;top:0;transform:translate(-50%,-50%) rotate(-45deg);width:.75rem}.jkl-calendar__padding{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--jkl-calendar-gap);padding:var(--jkl-calendar-padding)}@media screen and (forced-colors:active){.jkl-calendar__padding{border:1px solid CanvasText}}@media screen and (prefers-color-scheme:light){:root{--jkl-calendar-disabled-day-color:#c8c5c3;--jkl-calendar-navigation-arrow-focus-color:#636060}}[data-theme=light]{--jkl-calendar-navigation-arrow-focus-color:#636060}@media screen and (prefers-color-scheme:dark){:root{--jkl-calendar-disabled-day-color:#636060;--jkl-calendar-navigation-arrow-focus-color:#c8c5c3}}[data-theme=dark]{--jkl-calendar-navigation-arrow-focus-color:#c8c5c3}.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__arrow{align-items:center;background-color:initial;border-style:none;color:var(--jkl-calendar-text-color);cursor:pointer;display:inline-flex;height:2.5rem;justify-content:center;margin:0 0 0 -.5rem;outline:0;outline-style:none;padding:0;position:relative;width:2.5rem}.jkl-calendar-navigation__arrow:active,.jkl-calendar-navigation__arrow:focus,.jkl-calendar-navigation__arrow:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-calendar-navigation__arrow{border-style:revert}.jkl-calendar-navigation__arrow,.jkl-calendar-navigation__arrow:active,.jkl-calendar-navigation__arrow:focus,.jkl-calendar-navigation__arrow:hover{outline:revert;outline-style:revert}}.jkl-calendar-navigation__arrow:hover{color:var(--jkl-calendar-navigation-arrow-focus-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navigation__arrow:focus{outline:.125rem solid var(--jkl-calendar-focus-color);outline-offset:-.125rem}.jkl-calendar-navigation__arrow:disabled{color:var(--jkl-calendar-disabled-day-color)}.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{--jkl-icon-weight:300;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:0;color:inherit;font-size:1rem;font-weight:400;font-weight:700;height:2.5rem;line-height:1.5rem;margin:0;outline:0;outline-style:none;padding:0;padding-inline-end:var(--chevron-size);text-align:end;text-align-last:end}.jkl-calendar-navigation-dropdown__select:active,.jkl-calendar-navigation-dropdown__select:focus,.jkl-calendar-navigation-dropdown__select:hover{outline:0;outline-style:none}@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-select-open-background-color);color:var(--jkl-select-text-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navigation-dropdown__select:focus{outline:.125rem solid var(--jkl-calendar-focus-color);outline-offset:1px}.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-spacing-8)}.jkl-calendar-table th{--jkl-icon-weight:300;font-size:1rem;font-weight:400;line-height:1.5rem;padding-bottom:var(--jkl-spacing-8)}.jkl-calendar-table td{text-align:center}.jkl-calendar-table td+td,.jkl-calendar-table th+th{padding-left:.25rem}.jkl-calendar-table tr+tr>td{padding-top:.25rem}@media screen and (prefers-color-scheme:light){:root{--jkl-calendar-adjacent-month-color:#636060;--jkl-calendar-disabled-day-color:#c8c5c3;--jkl-calendar-active-day-color:#fff;--jkl-calendar-hover-date-background-color:#ece9e5;--jkl-calendar-selected-date-background-color:#1b1917}}[data-theme=light]{--jkl-calendar-adjacent-month-color:#636060;--jkl-calendar-disabled-day-color:#c8c5c3;--jkl-calendar-active-day-color:#fff;--jkl-calendar-hover-date-background-color:#ece9e5;--jkl-calendar-selected-date-background-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-calendar-adjacent-month-color:#c8c5c3;--jkl-calendar-disabled-day-color:#636060;--jkl-calendar-active-day-color:#000;--jkl-calendar-hover-date-background-color:#636060;--jkl-calendar-selected-date-background-color:#f9f9f9}}[data-theme=dark]{--jkl-calendar-adjacent-month-color:#c8c5c3;--jkl-calendar-disabled-day-color:#636060;--jkl-calendar-active-day-color:#000;--jkl-calendar-hover-date-background-color:#636060;--jkl-calendar-selected-date-background-color:#f9f9f9}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-calendar-date-size:2.375rem;--jkl-calendar-date-font-size:var(--jkl-body-font-size);--jkl-calendar-date-line-height:var(--jkl-body-line-height);--jkl-calendar-date-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-calendar-date-size:2.25rem;--jkl-calendar-date-font-size:var(--jkl-small-font-size);--jkl-calendar-date-line-height:var(--jkl-small-line-height);--jkl-calendar-date-font-weight:var(--jkl-small-font-weight)}}@media (width >= 0) and (max-width:374px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-calendar-date-size:2rem}}[data-density=compact],[data-layout-density=compact]{--jkl-calendar-date-size:2rem;--jkl-calendar-date-font-size:var(--jkl-small-font-size);--jkl-calendar-date-line-height:var(--jkl-small-line-height);--jkl-calendar-date-font-weight:var(--jkl-small-font-weight)}.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-calendar-text-color);display:inline-flex;font-size:var(--jkl-calendar-date-font-size);font-weight:var(--jkl-calendar-date-font-weight);height:var(--jkl-calendar-date-size);justify-content:center;line-height:var(--jkl-calendar-date-line-height);margin:var(--jkl-calendar-date-margin);padding:.125rem 0 0;position:relative;transition-duration:75ms;transition-property:color,background-color,box-shadow;transition-timing-function:ease-out;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]{--jkl-icon-weight:300;color:var(--jkl-calendar-adjacent-month-color);font-size:1rem;font-weight:400;line-height:1.5rem;padding:0}.jkl-calendar-date-button[aria-current=date]{font-weight:700}.jkl-calendar-date-button:hover:not(:disabled){background-color:var(--jkl-calendar-hover-date-background-color);cursor:pointer}.jkl-calendar-date-button[aria-pressed=true]{background-color:var(--jkl-calendar-selected-date-background-color);color:var(--jkl-calendar-active-day-color);cursor:pointer}.jkl-calendar-date-button[aria-pressed=true]:hover{color:var(--jkl-calendar-text-color)}.jkl-calendar-date-button:disabled{color:var(--jkl-calendar-disabled-day-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-date-button:focus{outline:.125rem solid var(--jkl-calendar-focus-color);outline-offset:.125rem}@media screen and (prefers-color-scheme:light){:root{--jkl-datepicker-focus-color:#1b1917}}[data-theme=light]{--jkl-datepicker-focus-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-datepicker-focus-color:#f9f9f9}}[data-theme=dark]{--jkl-datepicker-focus-color:#f9f9f9}.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}.jkl-datepicker--open .jkl-text-input-wrapper{border-color:var(--jkl-text-input-focus-color);box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-focus-color),0 0 0 .0625rem var(--jkl-text-input-focus-color)}@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/src/components/datepicker/styles/datepicker.scss

@@ -0,0 +1,63 @@
+@charset "UTF-8";
+@use "../../../core/jkl";
+
+@use "calendar";
+@use "calendar-navigation";
+@use "calendar-navigation-dropdown";
+@use "calendar-table";
+@use "calendar-date-button";
+
+@include jkl.light-mode-variables {
+    --jkl-datepicker-focus-color: #{jkl.$color-granitt};
+}
+@include jkl.dark-mode-variables {
+    --jkl-datepicker-focus-color: #{jkl.$color-snohvit};
+}
+
+.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;
+    }
+
+    &--open {
+        .jkl-text-input-wrapper {
+            box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color),
+                0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color);
+            border-color: var(--jkl-text-input-focus-color);
+        }
+    }
+
+    @include jkl.small-device {
+        &__calendar-wrapper {
+            left: -1.15rem;
+        }
+    }
+
+    // Custom tweaks for iPhone SE
+    @include jkl.screen-to(375px) {
+        &__calendar-wrapper {
+            left: -2.5rem;
+        }
+    }
+}

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

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

package/src/components/list/styles/list.css

@@ -0,0 +1,128 @@
+@charset "UTF-8";
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+/*
+ * NOTE: These icon also exists as a copy in the jkl-icons-react package.
+ *       If you're here to change them, consider changing them there as well, or
+ *       finding a technical solution to sharing the SVG markup
+ */
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-list-marker-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' fill='%231B1917' width='9px' height='9px'%3E%3Cpath d='M4.01 0l4.002 4.002L4.01 8.004.008 4.002z'/%3E%3C/svg%3E");
+    --jkl-list-marker-secondary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' width='9px' height='9px' fill='transparent'%3E%3Cpath stroke='%231B1917' d='M4.002.707l3.295 3.295-3.295 3.295L.707 4.002z'/%3E%3C/svg%3E");
+    --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23F6B3B3'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
+    --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23ACD3B5'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
+    --jkl-list-text-color: #1b1917;
+  }
+}
+[data-theme=light] {
+  --jkl-list-marker-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' fill='%231B1917' width='9px' height='9px'%3E%3Cpath d='M4.01 0l4.002 4.002L4.01 8.004.008 4.002z'/%3E%3C/svg%3E");
+  --jkl-list-marker-secondary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' width='9px' height='9px' fill='transparent'%3E%3Cpath stroke='%231B1917' d='M4.002.707l3.295 3.295-3.295 3.295L.707 4.002z'/%3E%3C/svg%3E");
+  --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23F6B3B3'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
+  --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23ACD3B5'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
+  --jkl-list-text-color: #1b1917;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-list-marker-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' fill='%23F9F9F9' width='9px' height='9px'%3E%3Cpath d='M4.01 0l4.002 4.002L4.01 8.004.008 4.002z'/%3E%3C/svg%3E");
+    --jkl-list-marker-secondary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' width='9px' height='9px' fill='transparent'%3E%3Cpath stroke='%23F9F9F9' d='M4.002.707l3.295 3.295-3.295 3.295L.707 4.002z'/%3E%3C/svg%3E");
+    --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23DE9E9E'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
+    --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%2394B79B'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
+    --jkl-list-text-color: #f9f9f9;
+  }
+}
+[data-theme=dark] {
+  --jkl-list-marker-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' fill='%23F9F9F9' width='9px' height='9px'%3E%3Cpath d='M4.01 0l4.002 4.002L4.01 8.004.008 4.002z'/%3E%3C/svg%3E");
+  --jkl-list-marker-secondary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' width='9px' height='9px' fill='transparent'%3E%3Cpath stroke='%23F9F9F9' d='M4.002.707l3.295 3.295-3.295 3.295L.707 4.002z'/%3E%3C/svg%3E");
+  --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23DE9E9E'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
+  --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%2394B79B'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
+  --jkl-list-text-color: #f9f9f9;
+}
+
+.jkl-list {
+  list-style: disc var(--jkl-list-marker-default);
+  padding-left: 1.75rem;
+}
+.jkl-list > .jkl-list__item {
+  margin: 0.5rem 0;
+}
+.jkl-list > .jkl-list__item:first-of-type {
+  margin-top: 0;
+}
+.jkl-list > .jkl-list__item:last-of-type {
+  margin-bottom: 0;
+}
+.jkl-list > .jkl-list__item > .jkl-list {
+  margin-bottom: 0;
+}
+.jkl-list .jkl-list > .jkl-list__item {
+  list-style: disc var(--jkl-list-marker-secondary);
+  margin: 0;
+}
+.jkl-list .jkl-list > .jkl-list__item:first-of-type {
+  margin-top: 0.5rem;
+}
+.jkl-list .jkl-list > .jkl-list__item:last-of-type {
+  margin-bottom: 0.5rem;
+}
+.jkl-list--ordered {
+  padding-left: revert;
+}
+.jkl-list--ordered > .jkl-list__item {
+  padding-left: revert;
+  list-style: decimal;
+}
+.jkl-list--ordered .jkl-list--ordered > .jkl-list__item {
+  list-style: lower-alpha;
+}
+.jkl-list__item {
+  color: var(--jkl-list-text-color);
+  padding-left: 0.375rem;
+}
+.jkl-list__item::marker {
+  color: var(--jkl-list-text-color);
+}
+.jkl-list__item--iconed {
+  list-style: none;
+  position: relative;
+  padding-left: 1em;
+}
+.jkl-list__item--iconed::before {
+  text-indent: -9999px;
+  position: absolute;
+  top: 0.25em;
+  left: clamp(-1em, -1rem, -1.4375rem);
+  background-size: contain;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+}
+.jkl-list__item--check::before {
+  content: "✓";
+  content: "✓"/"";
+  alt: " ";
+  background-image: var(--jkl-list-marker-check);
+}
+.jkl-list__item--cross::before {
+  content: "❌";
+  content: "❌"/"";
+  alt: " ";
+  background-image: var(--jkl-list-marker-cross);
+}
+@media screen and (forced-colors: active) {
+  .jkl-list:not(.jkl-list--ordered) > .jkl-list__item:not(.jkl-list__item--iconed) {
+    list-style: disc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' fill='CanvasText' width='9px' height='9px'%3E%3Cpath d='M4.01 0l4.002 4.002L4.01 8.004.008 4.002z'/%3E%3C/svg%3E");
+  }
+  .jkl-list .jkl-list:not(.jkl-list--ordered):not(.jkl-list--iconed) > .jkl-list__item:not(.jkl-list__item--iconed) {
+    list-style: disc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' width='9px' height='9px' fill='transparent'%3E%3Cpath stroke='CanvasText' d='M4.002.707l3.295 3.295-3.295 3.295L.707 4.002z'/%3E%3C/svg%3E");
+  }
+  .jkl-list .jkl-list__item--check::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='CanvasText'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='Canvas' stroke-width='1.5'/%3E%3C/svg%3E%0A");
+  }
+  .jkl-list .jkl-list__item--cross::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='CanvasText'/%3E%3Cpath fill='Canvas' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='Canvas' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
+  }
+}