dibk-designsystemet 1.0.0-rc.1

package/dist/index.css

@@ -0,0 +1,886 @@
+/* src/base.css */
+:root {
+  --dibk-color-ink: #202020;
+  --dibk-color-meta: #6b6560;
+  --dibk-color-hairline: #d7d4d1;
+  --dibk-color-ring: #4899e0;
+  --dibk-surface-blue: #ebf4fa;
+  --dibk-surface-blue-hover: #dceaf5;
+  --dibk-surface-green: #f1fae3;
+  --dibk-surface-orange: #faf0de;
+  --dibk-surface-grey: #f4f4f4;
+  --dibk-surface-pink: #f5f0f0;
+  --dibk-icon-info: url(data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2060%2060%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2730%27%20r%3D%2719%27%20fill%3D%27white%27/%3E%3Cpath%20d%3D%27M30%200C13.4325%200%200%2013.4325%200%2030C0%2046.5675%2013.4325%2060%2030%2060C46.5675%2060%2060%2046.5675%2060%2030C60%2013.4325%2046.5675%200%2030%200ZM24.9175%2040.025C26.3275%2035.5525%2028.9975%2030.195%2029.47%2028.84C30.1525%2026.8725%2028.9425%2026%2025.12%2029.3625L24.27%2027.7625C28.63%2023.02%2037.6075%2021.9475%2034.5525%2029.295C32.645%2033.8825%2031.28%2036.98%2030.5%2039.37C29.3625%2042.8525%2032.235%2041.44%2035.0475%2038.8425C35.43%2039.4675%2035.555%2039.67%2035.9375%2040.39C29.6925%2046.335%2022.76%2046.86%2024.9175%2040.025ZM36.7725%2019.6025C35.4425%2020.735%2033.4725%2020.71%2032.37%2019.5475C31.2675%2018.385%2031.4525%2016.5275%2032.78%2015.395C34.11%2014.2625%2036.08%2014.29%2037.1825%2015.45C38.28%2016.615%2038.1%2018.4725%2036.7725%2019.6025Z%27%20fill%3D%27%23003045%27/%3E%3C/svg%3E);
+  --dibk-container-max: 1400px;
+  --dibk-container-pad: clamp(1.25rem, 6vw, 6rem);
+}
+:where(body) {
+  margin: 0;
+  font-family: var(--ds-font-family, system-ui, sans-serif);
+  color: var(--ds-color-neutral-text-default, #202020);
+}
+.dibk-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* src/overrides.css */
+:root {
+  --ds-font-weight-regular: 300;
+  --ds-font-weight-medium: 400;
+  --ds-font-weight-semibold: 500;
+}
+strong,
+b {
+  font-weight: 600;
+}
+:root,
+[data-size] {
+  --ds-heading-lg-font-size: 2rem;
+}
+:root {
+  --ds-body-xs-letter-spacing: -0.01em;
+  --ds-body-sm-letter-spacing: -0.01em;
+  --ds-body-md-letter-spacing: -0.01em;
+  --ds-body-lg-letter-spacing: -0.01em;
+  --ds-body-xl-letter-spacing: -0.01em;
+  --ds-body-long-xs-letter-spacing: -0.01em;
+  --ds-body-long-sm-letter-spacing: -0.01em;
+  --ds-body-long-md-letter-spacing: -0.01em;
+  --ds-body-long-lg-letter-spacing: -0.01em;
+  --ds-body-long-xl-letter-spacing: -0.01em;
+  --ds-body-short-xs-letter-spacing: -0.01em;
+  --ds-body-short-sm-letter-spacing: -0.01em;
+  --ds-body-short-md-letter-spacing: -0.01em;
+  --ds-body-short-lg-letter-spacing: -0.01em;
+  --ds-body-short-xl-letter-spacing: -0.01em;
+  --ds-heading-2xs-letter-spacing: -0.037em;
+  --ds-heading-xs-letter-spacing: -0.037em;
+  --ds-heading-sm-letter-spacing: -0.037em;
+  --ds-heading-md-letter-spacing: -0.037em;
+  --ds-heading-lg-letter-spacing: -0.037em;
+  --ds-heading-xl-letter-spacing: -0.037em;
+  --ds-heading-2xl-letter-spacing: -0.037em;
+}
+.ds-alert {
+  border: none;
+}
+.ds-alert[data-color=info]:not(:has(> :is(h1, h2, h3, h4, h5, h6):first-child))::before,
+.ds-alert[data-color=info] > :is(h1, h2, h3, h4, h5, h6):first-child::before {
+  background: center / contain no-repeat var(--dibk-icon-info);
+  -webkit-mask: none;
+  mask: none;
+}
+.ds-card {
+  --dsc-card-border-width: 0;
+  --dsc-card-block-border-width: 0;
+  background: #fff;
+}
+.ds-card[data-dibk-color=blue] {
+  background: var(--dibk-surface-blue);
+}
+.ds-card[data-dibk-color=green] {
+  background: var(--dibk-surface-green);
+}
+.ds-card[data-dibk-color=orange] {
+  background: var(--dibk-surface-orange);
+}
+.ds-card[data-dibk-color=grey] {
+  background: var(--dibk-surface-grey);
+}
+.ds-card[data-dibk-color=pink] {
+  background: var(--dibk-surface-pink);
+}
+.ds-details {
+  --dsc-details-background: var(--dibk-surface-blue);
+  --dsc-details-summary-background: var(--dibk-surface-blue);
+  --dsc-details-summary-background--hover: var(--dibk-surface-blue-hover);
+  --dsc-details-summary-background--open: var(--dibk-surface-blue);
+  --dsc-details-summary-color: var(--ds-color-accent-base-default, #003045);
+  --dsc-details-padding: var(--ds-size-4) var(--ds-size-5);
+  border: none;
+}
+.ds-details + .ds-details {
+  margin-top: 0.5rem;
+}
+.ds-details > :is(summary, u-summary) {
+  justify-content: space-between;
+  font-weight: var(--ds-font-weight-semibold);
+}
+.ds-details > :is(summary, u-summary)::before {
+  order: 1;
+  transition: rotate 0.2s ease;
+}
+.ds-details::details-content,
+.ds-details::part(details-content) {
+  transition-duration: 0.2s;
+}
+@supports not (interpolate-size: allow-keywords) {
+  .ds-details::details-content {
+    block-size: auto;
+    display: grid;
+    grid-template-rows: minmax(0, 0fr);
+    transition: content-visibility 0.2s allow-discrete, grid-template-rows 0.2s;
+  }
+  .ds-details[open]::details-content {
+    grid-template-rows: minmax(0, 1fr);
+  }
+  .ds-details > :not(summary, u-summary) {
+    min-block-size: 0;
+  }
+}
+.ds-button {
+  font-weight: var(--ds-font-weight-semibold);
+  transition:
+    background-color 0.2s,
+    color 0.2s,
+    border-color 0.2s;
+}
+.ds-button[data-variant=primary] {
+  --dsc-button-border-color: var(--ds-color-accent-base-default);
+  --dsc-button-background--hover: var(--ds-color-accent-base-contrast-default);
+  --dsc-button-color--hover: var(--ds-color-accent-base-default);
+}
+.ds-button[data-variant=secondary] {
+  --dsc-button-border-color: var(--ds-color-accent-base-default);
+  --dsc-button-color: var(--ds-color-accent-base-default);
+  --dsc-button-background--hover: var(--ds-color-accent-base-default);
+  --dsc-button-color--hover: var(--ds-color-accent-base-contrast-default);
+}
+.ds-button[data-variant=tertiary] {
+  --dsc-button-color: var(--ds-color-accent-base-default);
+}
+.ds-pagination .ds-button[aria-current=true] {
+  --dsc-button-color: var(--ds-color-accent-base-contrast-default);
+}
+@media (max-width: 36rem) {
+  .ds-pagination {
+    --dsc-pagination-gap: 0.125rem;
+  }
+  .ds-pagination .ds-button {
+    min-inline-size: 2.25rem;
+    --dsc-button-padding-inline: 0.25rem;
+  }
+  .ds-pagination li:empty::before {
+    min-inline-size: 1.5rem;
+  }
+}
+:is(.ds-toggle-group, .ds-togglegroup) label {
+  --dsc-button-color: var(--ds-color-text-subtle);
+}
+:is(.ds-toggle-group, .ds-togglegroup) label:has(input:checked) {
+  --dsc-button-color: var(--ds-color-base-contrast-default);
+}
+:is(.ds-toggle-group, .ds-togglegroup) label[aria-disabled=true] {
+  cursor: default;
+}
+.ds-field:has(:disabled:not(option), [aria-disabled=true]) > * {
+  cursor: default;
+}
+.ds-tabs {
+  --dsc-tabs-tab-color--selected: var(--ds-color-accent-base-default);
+}
+.ds-tabs [role=tab][aria-selected=true] {
+  font-weight: var(--ds-font-weight-semibold);
+}
+
+/* src/components/Logo/Logo.css */
+.dibk-logo {
+  display: block;
+  color: var(--ds-color-accent-base-default, #003045);
+}
+.dibk-logo--full {
+  height: 38px;
+  width: auto;
+}
+.dibk-logo--mark {
+  height: 48px;
+  width: auto;
+}
+
+/* src/components/Header/Header.css */
+.dibk-header {
+  width: 100%;
+  background: var(--dibk-surface-blue, #ebf4fa);
+  color: var(--ds-color-accent-base-default, #003045);
+}
+.dibk-header__inner {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  box-sizing: border-box;
+  min-height: 72px;
+  max-width: var(--dibk-container-max, 1400px);
+  margin: 0 auto;
+  padding: 12px var(--dibk-container-pad, 2rem);
+}
+.dibk-header__brand {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+}
+.dibk-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  margin-left: auto;
+}
+.dibk-header__shortcut {
+  text-decoration: none;
+}
+.dibk-logo.dibk-header__logo--mark {
+  display: none;
+}
+@media (max-width: 72rem) {
+  .dibk-header__shortcut.dibk-header__btn {
+    display: none;
+  }
+}
+@media (max-width: 48rem) {
+  .dibk-logo.dibk-header__logo--full {
+    display: none;
+  }
+  .dibk-logo.dibk-header__logo--mark {
+    display: block;
+    height: 36px;
+  }
+  .dibk-header__btn-label {
+    display: none;
+  }
+}
+.dibk-header__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-block-size: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 1.125rem;
+  font-weight: var(--ds-font-weight-medium);
+  letter-spacing: -0.01em;
+  cursor: pointer;
+}
+.dibk-header__btn:hover {
+  background: transparent;
+  text-decoration: underline;
+}
+.dibk-header__btn:focus-visible {
+  outline: 2px solid var(--ds-color-accent-base-default, #003045);
+  outline-offset: 4px;
+}
+.dibk-xglyph {
+  position: relative;
+  display: block;
+  width: 24px;
+  height: 24px;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dibk-xglyph__bar {
+  position: absolute;
+  top: calc(50% - 1px);
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 2px;
+  background: currentColor;
+}
+.dibk-xglyph__bar--a {
+  transform: rotate(45deg);
+}
+.dibk-xglyph__bar--b {
+  transform: rotate(-45deg);
+}
+.dibk-header__btn:hover .dibk-xglyph {
+  transform: rotate(180deg);
+}
+.dibk-burger {
+  display: block;
+}
+.dibk-burger__bar--top,
+.dibk-burger__bar--bottom {
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dibk-header__btn:hover .dibk-burger__bar--top {
+  transform: translateY(12px);
+}
+.dibk-header__btn:hover .dibk-burger__bar--bottom {
+  transform: translateY(-12px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .dibk-burger__bar--top,
+  .dibk-burger__bar--bottom,
+  .dibk-xglyph {
+    transition: none;
+  }
+}
+
+/* src/components/Search/Search.css */
+.dibk-search {
+  display: block;
+  padding: var(--ds-size-4) var(--ds-size-5);
+  transition: background-color 220ms ease, box-shadow 220ms ease;
+}
+.dibk-search:hover,
+.dibk-search:focus-within {
+  background: var(--ds-color-neutral-background-default, #fff);
+  box-shadow: inset 0 0 0 3px var(--dibk-color-ring, #4899e0);
+}
+.dibk-search__field {
+  border-bottom: 2px solid var(--ds-color-accent-base-default, #003045);
+  border-radius: 0;
+  color: var(--ds-color-accent-base-default, #003045);
+}
+.dibk-search__field::before,
+.dibk-search__field::after {
+  content: none;
+}
+.dibk-search__field:has(input:placeholder-shown) button[type=reset] {
+  display: none;
+}
+.dibk-search__field input {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  outline: none;
+  padding: 8px 0;
+  color: var(--ds-color-accent-base-default, #003045);
+  font: inherit;
+  font-size: 1.5rem;
+  font-weight: var(--ds-font-weight-semibold);
+  text-overflow: ellipsis;
+}
+.dibk-search__field input::placeholder {
+  color: var(--ds-color-accent-base-default, #003045);
+  opacity: 1;
+}
+.dibk-search__field input:focus::placeholder {
+  opacity: 0.45;
+}
+.dibk-search__field button {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--ds-color-accent-base-default, #003045);
+}
+.dibk-search__hint {
+  margin-top: var(--ds-size-3);
+  font-size: 1.125rem;
+}
+@media (max-width: 48rem) {
+  .dibk-search__field input {
+    font-size: 1.25rem;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dibk-search {
+    transition: none;
+  }
+}
+
+/* src/components/MegaMenu/MegaMenu.css */
+.dibk-megamenu {
+  background: var(--dibk-surface-blue);
+  color: var(--ds-color-accent-base-default, #003045);
+  min-height: calc(100dvh - 72px);
+}
+.dibk-megamenu__inner {
+  box-sizing: border-box;
+  max-width: var(--dibk-container-max, 1400px);
+  margin: 0 auto;
+  padding: 32px var(--dibk-container-pad, 2rem) 100px;
+}
+.dibk-megamenu__search {
+  max-width: 660px;
+  margin-inline-start: calc(-1 * var(--ds-size-5));
+  margin-block-end: 80px;
+}
+.dibk-megamenu__columns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: 20px;
+}
+.dibk-megamenu__column {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 48px;
+}
+@media (max-width: 48rem) {
+  .dibk-megamenu__columns {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: 48px;
+  }
+}
+.dibk-megamenu__inner > .dibk-iconlinklist[data-columns="2"] {
+  grid-template-columns: repeat(2, minmax(0, 26rem));
+}
+@media (max-width: 36rem) {
+  .dibk-megamenu__inner > .dibk-iconlinklist[data-columns="2"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .dibk-megamenu__inner {
+    transition: opacity 0.18s ease-out, translate 0.18s ease-out;
+  }
+  @starting-style {
+    .dibk-megamenu__inner {
+      opacity: 0;
+      translate: 0 -6px;
+    }
+  }
+}
+.dibk-megamenu :focus-visible {
+  outline: 2px solid var(--ds-color-accent-base-default, #003045);
+  outline-offset: 4px;
+}
+
+/* src/components/IconLinkList/IconLinkList.css */
+.dibk-iconlinklist {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 1rem 2rem;
+}
+.dibk-iconlinklist[data-columns="1"] {
+  grid-template-columns: minmax(0, 1fr);
+}
+.dibk-iconlinklist[data-columns="2"] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.dibk-iconlinklist[data-columns="3"] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.dibk-iconlinklist__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+  gap: 0.75rem;
+}
+.dibk-iconlinklist__icon {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ds-color-accent-base-default, #003045);
+  line-height: 0;
+}
+.dibk-iconlinklist__icon :where(svg, img) {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.dibk-iconlinklist__body {
+  min-width: 0;
+}
+.dibk-iconlinklist__link {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 12px;
+  color: var(--dibk-color-ink, #202020);
+  font-size: 1.25rem;
+  line-height: 1.625;
+  font-weight: var(--ds-font-weight-medium);
+  text-decoration: none;
+  text-underline-offset: 0.15em;
+}
+.dibk-iconlinklist__link:hover,
+.dibk-iconlinklist__link:focus-visible {
+  text-decoration: underline;
+}
+.dibk-iconlinklist__chevron {
+  flex: none;
+  margin-top: calc((1.625em - 20px) / 2);
+}
+.dibk-iconlinklist__lock {
+  flex: none;
+  align-self: center;
+  line-height: 0;
+  color: var(--ds-color-accent-base-default, #003045);
+}
+.dibk-iconlinklist__lock svg {
+  width: 1.1rem;
+  height: 1.1rem;
+}
+.dibk-iconlinklist__description {
+  margin: 0.25rem 0 0;
+  color: var(--dibk-color-ink, #202020);
+  font-size: 1rem;
+  line-height: 1.5;
+  font-weight: var(--ds-font-weight-regular);
+}
+@media (max-width: 62rem) {
+  .dibk-iconlinklist[data-columns="3"] {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 36rem) {
+  .dibk-iconlinklist[data-columns="2"],
+  .dibk-iconlinklist[data-columns="3"] {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* src/components/MenuSection/MenuSection.css */
+.dibk-menusection__header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin: 0 0 20px;
+  color: var(--ds-color-accent-base-default, #003045);
+  font-size: var(--ds-font-size-6);
+  font-weight: var(--ds-font-weight-semibold);
+  line-height: 1.333;
+}
+.dibk-menusection__icon {
+  flex: none;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dibk-menusection__icon :where(svg, img) {
+  width: 100%;
+  height: 100%;
+}
+.dibk-menusection__titlelink {
+  color: inherit;
+  text-decoration: none;
+}
+.dibk-menusection__titlelink:hover,
+.dibk-menusection__titlelink:focus-visible {
+  text-decoration: underline;
+}
+.dibk-menusection__body {
+  padding-left: 32px;
+}
+.dibk-menusection__body .dibk-iconlinklist {
+  row-gap: 0;
+}
+
+/* src/components/Footer/Footer.css */
+.dibk-footer {
+  background-color: var(--ds-color-accent-base-default, #003045);
+  color: #ffffff;
+  width: 100%;
+}
+.dibk-footer__inner {
+  box-sizing: border-box;
+  max-width: var(--dibk-container-max, 1400px);
+  margin: 0 auto;
+  padding: 3rem var(--dibk-container-pad, 2rem);
+}
+.dibk-footer__content {
+  font-size: 1.125rem;
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.dibk-footer__content p {
+  margin: 0;
+}
+.dibk-footer__content a {
+  color: #ffffff;
+  text-decoration: underline;
+}
+.dibk-footer__bottom {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem 2rem;
+  margin-top: 2.5rem;
+}
+.dibk-footer__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+.dibk-footer__link {
+  color: #ffffff;
+  font-size: 1rem;
+  line-height: 1.4;
+  text-decoration: underline;
+}
+.dibk-footer__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: #ffffff;
+}
+.dibk-footer__brand .dibk-logo.dibk-footer__mark {
+  height: 2.25rem;
+  width: auto;
+  flex: none;
+  color: #ffffff;
+}
+.dibk-footer__wordmark {
+  font-size: 1rem;
+  line-height: 1.2;
+  font-weight: var(--ds-font-weight-semibold);
+}
+@media (max-width: 36rem) {
+  .dibk-footer__inner {
+    padding: 2rem var(--dibk-container-pad, 2rem);
+  }
+}
+
+/* src/components/SectionHeader/SectionHeader.css */
+.dibk-sectionheader {
+  border-bottom: 1px solid #d7d4d1;
+  padding-bottom: 1rem;
+}
+.dibk-sectionheader__row {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+}
+.dibk-sectionheader__icon {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ds-color-accent-base-default, #003045);
+  line-height: 0;
+}
+.dibk-sectionheader__icon :where(svg, img) {
+  width: 4rem;
+  height: 4rem;
+}
+.dibk-sectionheader__title {
+  margin: 0;
+  color: var(--ds-color-accent-base-default, #003045);
+  font-size: 2rem;
+  line-height: 1.38;
+  font-weight: var(--ds-font-weight-semibold);
+}
+.dibk-sectionheader__description {
+  margin: 0.75rem 0 0;
+  color: var(--ds-color-accent-base-default, #003045);
+  font-size: 1.25rem;
+  line-height: 1.5;
+  font-weight: var(--ds-font-weight-regular);
+}
+@media (max-width: 36rem) {
+  .dibk-sectionheader__icon :where(svg, img) {
+    width: 3rem;
+    height: 3rem;
+  }
+  .dibk-sectionheader__title {
+    font-size: 1.625rem;
+  }
+}
+
+/* src/components/FeedbackWidget/FeedbackWidget.css */
+.dibk-feedback {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem 1.5rem;
+  padding: 1.25rem 2rem;
+  background-color: var(--dibk-surface-grey);
+}
+.dibk-feedback__question {
+  margin: 0;
+  color: var(--ds-color-accent-base-default, #003045);
+  font-size: 1.125rem;
+  line-height: 1.5;
+  font-weight: var(--ds-font-weight-semibold);
+}
+.dibk-feedback__actions {
+  display: flex;
+  gap: 0.75rem;
+}
+.dibk-feedback__btn {
+  padding-inline: 2rem;
+}
+
+/* src/components/AppShell/AppShell.css */
+.dibk-appshell {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.dibk-appshell__main {
+  flex: 1;
+  width: 100%;
+}
+.dibk-appshell__main:focus {
+  outline: none;
+}
+.dibk-skiplink {
+  position: fixed;
+  left: 1rem;
+  top: -4rem;
+  z-index: 100;
+  padding: 0.5rem 1rem;
+  background: var(--ds-color-accent-base-default);
+  color: var(--ds-color-accent-contrast-default, #fff);
+  text-decoration: none;
+  transition: top 0.15s ease-in;
+}
+.dibk-skiplink:focus {
+  top: 1rem;
+}
+.dibk-appshell__container {
+  box-sizing: border-box;
+  max-width: var(--dibk-container-max, 1400px);
+  margin: 0 auto;
+  padding: 2rem var(--dibk-container-pad, 2rem) 4rem;
+}
+.dibk-appshell__title {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  margin-left: 0.5rem;
+  font-size: var(--ds-font-size-5);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-color-accent-base-default);
+}
+.dibk-appshell__titletext {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dibk-appshell__menuheading {
+  margin-block-end: var(--ds-size-6);
+}
+
+/* src/components/AccountMenu/AccountMenu.css */
+.dibk-account__id {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--ds-size-2);
+  padding: 0 var(--ds-size-4) var(--ds-size-2);
+}
+.dibk-menu-login {
+  margin-top: var(--ds-size-10);
+}
+
+/* src/components/CopyButton/CopyButton.css */
+.dibk-copybtn {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-size-2);
+  flex: none;
+  font: inherit;
+  font-size: var(--ds-font-size-2);
+  font-weight: var(--ds-font-weight-medium);
+  line-height: 1;
+  color: var(--ds-color-accent-base-default);
+  background: transparent;
+  border: 1px solid var(--ds-color-accent-base-default);
+  border-radius: 0;
+  padding: var(--ds-size-2) var(--ds-size-3);
+  cursor: pointer;
+  transition:
+    background-color 0.18s ease,
+    color 0.18s ease,
+    border-color 0.18s ease;
+}
+.dibk-copybtn:hover {
+  background: var(--ds-color-accent-base-default);
+  color: var(--ds-color-neutral-background-default);
+}
+.dibk-copybtn:focus-visible {
+  outline: 2px solid var(--ds-color-accent-base-default);
+  outline-offset: 3px;
+}
+.dibk-copybtn[data-done="1"] {
+  color: var(--ds-color-success-text-subtle);
+  border-color: var(--ds-color-success-text-subtle);
+  background: transparent;
+}
+.dibk-copybtn__ico {
+  display: inline-flex;
+  font-size: 0.85em;
+}
+.dibk-copybtn__ico:empty {
+  display: none;
+}
+.dibk-copyiconbtn {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  padding: var(--ds-size-1);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--ds-color-text-subtle);
+  cursor: pointer;
+  transition: color 0.18s ease;
+}
+.dibk-copyiconbtn:hover {
+  color: var(--ds-color-accent-base-default);
+}
+.dibk-copyiconbtn:focus-visible {
+  outline: 2px solid var(--ds-color-accent-base-default);
+  outline-offset: 2px;
+}
+.dibk-copyiconbtn[data-done="1"] {
+  color: var(--ds-color-text-subtle);
+}
+.dibk-copyiconbtn__done {
+  font-size: inherit;
+  line-height: 1;
+}
+
+/* src/components/CodeBlock/CodeBlock.css */
+.dibk-code {
+  border: 1px solid var(--dibk-color-hairline);
+  background: var(--dibk-surface-grey);
+}
+.dibk-code__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ds-size-3);
+  padding: var(--ds-size-2) var(--ds-size-2) var(--ds-size-2) var(--ds-size-4);
+  border-bottom: 1px solid var(--dibk-color-hairline);
+}
+.dibk-code__label {
+  font-size: var(--ds-font-size-1);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: var(--ds-font-weight-semibold);
+  color: var(--dibk-color-meta);
+}
+.dibk-code__pre {
+  margin: 0;
+  padding: var(--ds-size-4) var(--ds-size-4);
+  overflow-x: auto;
+}
+.dibk-code__pre code {
+  font-family:
+    ui-monospace,
+    "SF Mono",
+    "Cascadia Mono",
+    monospace;
+  font-size: var(--ds-font-size-3);
+  line-height: 1.6;
+  color: var(--dibk-color-ink);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+/*# sourceMappingURL=index.css.map */