@lmfaole/basics 0.3.0 → 0.5.0

package/basic-components/basic-toc/README.md

@@ -0,0 +1,43 @@
+# `basic-toc`
+
+Generated table-of-contents navigation from the nearest `<main>`.
+
+## Register
+
+```js
+import "@lmfaole/basics/basic-components/basic-toc/register";
+```
+
+## Example
+
+```html
+<basic-toc data-title="Innhold">
+  <nav aria-label="Innhold" data-page-toc-nav></nav>
+</basic-toc>
+```
+
+## Props
+
+| Prop | Description | Type | Default | Options |
+| --- | --- | --- | --- | --- |
+| `data-title` | Accessible label applied to the generated nav. | string | `Innhold` | any string |
+| `data-heading-selector` | Selector used to collect headings from the nearest `<main>`. | CSS selector | `h1, h2, h3, h4, h5, h6` | any CSS selector |
+
+## Markup Hooks
+
+| Hook | Description | Type | Default | Options |
+| --- | --- | --- | --- | --- |
+| `data-page-toc-nav` | Container where the generated outline links are rendered. | descendant element attribute | required | present on one descendant element |
+
+## Behavior
+
+- Generates missing heading ids automatically
+- Gives duplicate headings unique fragment ids
+- Ignores hidden headings
+- Rebuilds the outline when matching headings are added or changed
+
+## Markup Contract
+
+- Render the element inside the same `<main>` that contains the content it should index
+- Provide a descendant element with `data-page-toc-nav` for the generated links
+- Keep layout and styling outside the package

package/basic-components/basic-toc/register.d.ts

@@ -0,0 +1 @@
+export {};

package/basic-styling/components/basic-accordion.css

@@ -0,0 +1,99 @@
+basic-accordion {
+    --basic-accordion-padding: var(--basic-panel-padding);
+    display: grid;
+    gap: 0;
+}
+
+basic-accordion > details {
+    margin: 0;
+    border-inline: var(--basic-border-width) solid var(--basic-color-border);
+    background: var(--basic-color-surface);
+}
+
+basic-accordion > details > summary {
+    --basic-interaction-border-rest: transparent;
+    --basic-interaction-border-hover: transparent;
+    --basic-interaction-border-active: transparent;
+    --basic-interaction-border-selected: transparent;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--basic-control-padding-block) var(--basic-control-padding-inline);
+    color: inherit;
+    font-weight: 600;
+    text-align: left;
+    cursor: pointer;
+    background: transparent;
+}
+
+basic-accordion > details > summary::-webkit-details-marker {
+    display: none;
+}
+
+basic-accordion > details > summary::after {
+    content: "+";
+    flex: none;
+    color: var(--basic-color-text-muted);
+    font-size: var(--basic-font-size-title);
+    line-height: 1;
+}
+
+basic-accordion > details:first-child {
+    border-block-start: var(--basic-border-width) solid var(--basic-color-border);
+    border-start-start-radius: var(--basic-radius);
+    border-start-end-radius: var(--basic-radius);
+}
+
+basic-accordion > details:first-child > summary {
+    border-start-start-radius: var(--basic-radius);
+    border-start-end-radius: var(--basic-radius);
+}
+
+basic-accordion > details + details {
+    border-block-start: var(--basic-border-width) solid var(--basic-color-border);
+}
+
+basic-accordion > details:last-child {
+    border-block-end: var(--basic-border-width) solid var(--basic-color-border);
+    border-end-start-radius: var(--basic-radius);
+    border-end-end-radius: var(--basic-radius);
+}
+
+basic-accordion > details:last-child:not([open]) > summary {
+    border-end-start-radius: var(--basic-radius);
+    border-end-end-radius: var(--basic-radius);
+}
+
+basic-accordion > details[open] > summary {
+    border-block-end: var(--basic-border-width) solid var(--basic-color-border-selected);
+}
+
+basic-accordion > details[open] > summary::after {
+    content: "-";
+    color: inherit;
+}
+
+basic-accordion > details[open] {
+    padding-block-end: var(--basic-accordion-padding);
+}
+
+basic-accordion > details[open] > summary + :where(*) {
+    margin-block-start: var(--basic-accordion-padding);
+}
+
+basic-accordion > details > :where(:not(summary)) {
+    margin-block: 0;
+    margin-inline: var(--basic-accordion-padding);
+}
+
+basic-accordion > details > :not(summary) + :not(summary) {
+    margin-block-start: var(--basic-flow-space);
+}
+
+basic-accordion > details[data-disabled] > summary,
+basic-accordion > details[disabled] > summary,
+basic-accordion > details[aria-disabled="true"] > summary {
+    color: var(--basic-color-text-muted);
+    cursor: default;
+}

package/basic-styling/components/basic-alert.css

@@ -0,0 +1,27 @@
+basic-alert {
+    display: block;
+    padding: var(--basic-panel-padding);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius);
+    background: var(--basic-color-surface-muted);
+}
+
+basic-alert > :where(*) {
+    margin-block: 0;
+}
+
+basic-alert > :where(* + *) {
+    margin-block-start: var(--basic-flow-space);
+}
+
+basic-alert [data-alert-close] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--basic-control-padding-block) var(--basic-control-padding-inline);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius-pill);
+    background: var(--basic-color-surface);
+    color: inherit;
+    cursor: pointer;
+}

package/basic-styling/components/basic-carousel.css

@@ -0,0 +1,183 @@
+basic-carousel {
+    --basic-carousel-gap: var(--basic-space-4);
+    --basic-carousel-controls-gap: var(--basic-space-3);
+    --basic-carousel-button-size: 2.75rem;
+    --basic-carousel-marker-size: 1.75rem;
+    --basic-carousel-item-width: 90%;
+    --basic-carousel-track-padding: var(--basic-space-1);
+    --basic-carousel-snap-align: center;
+    display: block;
+}
+
+basic-carousel[data-basic-carousel-snapping="start"] {
+    --basic-carousel-snap-align: start;
+}
+
+basic-carousel[data-basic-carousel-snapping="end"] {
+    --basic-carousel-snap-align: end;
+}
+
+basic-carousel [data-carousel-track] {
+    display: flex;
+    align-items: stretch;
+    gap: var(--basic-carousel-gap);
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--basic-carousel-track-padding);
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+}
+
+basic-carousel :is(ol, ul)[data-carousel-track] {
+    list-style: none;
+    padding-inline-start: var(--basic-carousel-track-padding);
+}
+
+basic-carousel [data-carousel-track] > * {
+    box-sizing: border-box;
+    flex: 0 0 var(--basic-carousel-item-width);
+    inline-size: var(--basic-carousel-item-width);
+    min-inline-size: 0;
+    padding: var(--basic-panel-padding);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius);
+    background: var(--basic-color-surface);
+    scroll-snap-align: var(--basic-carousel-snap-align);
+    scroll-snap-stop: always;
+}
+
+basic-carousel [data-carousel-track] > * > :where(*) {
+    margin-block: 0;
+}
+
+basic-carousel [data-carousel-track] > * > :where(* + *) {
+    margin-block-start: var(--basic-flow-space);
+}
+
+basic-carousel [data-carousel-track] > * > p:first-child {
+    color: var(--basic-color-text-muted);
+    font-size: 0.875rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+basic-carousel [data-carousel-track] > * > a {
+    color: inherit;
+    font-weight: 600;
+}
+
+@supports (scroll-marker-group: after) {
+    basic-carousel {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        grid-template-rows: minmax(0, auto) auto;
+        gap: var(--basic-carousel-controls-gap);
+        align-items: start;
+    }
+
+    basic-carousel:is([data-basic-carousel-controls="markers"], [data-basic-carousel-controls="none"]) {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    basic-carousel [data-carousel-track] {
+        grid-column: 1 / -1;
+        grid-row: 1;
+        scroll-marker-group: after;
+    }
+
+    basic-carousel:is([data-basic-carousel-controls="markers"], [data-basic-carousel-controls="none"]) [data-carousel-track] {
+        grid-column: 1;
+    }
+
+    basic-carousel:is([data-basic-carousel-controls="arrows"], [data-basic-carousel-controls="none"]) [data-carousel-track] {
+        scroll-marker-group: none;
+    }
+
+    basic-carousel [data-carousel-track]::scroll-button(inline-start),
+    basic-carousel [data-carousel-track]::scroll-button(inline-end) {
+        display: inline-flex;
+        align-items: center;
+        align-self: center;
+        justify-content: center;
+        inline-size: var(--basic-carousel-button-size);
+        block-size: var(--basic-carousel-button-size);
+        margin: 0;
+        padding: 0;
+        border: var(--basic-border-width) solid var(--basic-color-border);
+        border-radius: var(--basic-radius-pill);
+        background: var(--basic-color-surface);
+        color: inherit;
+        cursor: pointer;
+        grid-row: 2;
+    }
+
+    basic-carousel:is([data-basic-carousel-controls="markers"], [data-basic-carousel-controls="none"]) [data-carousel-track]::scroll-button(inline-start),
+    basic-carousel:is([data-basic-carousel-controls="markers"], [data-basic-carousel-controls="none"]) [data-carousel-track]::scroll-button(inline-end) {
+        display: none;
+    }
+
+    basic-carousel [data-carousel-track]::scroll-button(inline-start) {
+        content: "<" / "Previous slide";
+        grid-column: 1;
+        justify-self: end;
+    }
+
+    basic-carousel [data-carousel-track]::scroll-button(inline-end) {
+        content: ">" / "Next slide";
+        grid-column: 3;
+        justify-self: start;
+    }
+
+    basic-carousel [data-carousel-track]::scroll-button(*):disabled {
+        opacity: 0.45;
+        cursor: not-allowed;
+    }
+
+    basic-carousel [data-carousel-track]::scroll-marker-group {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        align-self: center;
+        justify-content: center;
+        gap: var(--basic-space-2);
+        min-block-size: var(--basic-carousel-button-size);
+        grid-column: 2;
+        grid-row: 2;
+    }
+
+    basic-carousel[data-basic-carousel-controls="markers"] [data-carousel-track]::scroll-marker-group {
+        grid-column: 1;
+    }
+
+    basic-carousel:is([data-basic-carousel-controls="arrows"], [data-basic-carousel-controls="none"]) [data-carousel-track]::scroll-marker-group {
+        display: none;
+    }
+
+    basic-carousel [data-carousel-track] > *::scroll-marker {
+        content: attr(data-basic-carousel-marker) / attr(data-basic-carousel-marker-label);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-inline-size: var(--basic-carousel-marker-size);
+        block-size: var(--basic-carousel-marker-size);
+        padding-inline: var(--basic-space-2);
+        border: var(--basic-border-width) solid var(--basic-color-border);
+        border-radius: var(--basic-radius-pill);
+        background: var(--basic-color-surface);
+        color: inherit;
+        font-size: 0.875rem;
+        font-weight: 600;
+    }
+
+    basic-carousel:is([data-basic-carousel-controls="arrows"], [data-basic-carousel-controls="none"]) [data-carousel-track] > *::scroll-marker {
+        content: none;
+    }
+
+    basic-carousel [data-carousel-track] > *::scroll-marker:target-current {
+        border-color: var(--basic-color-border-selected);
+        background: var(--basic-color-surface-selected);
+    }
+}

package/basic-styling/components/basic-dialog.css

@@ -0,0 +1,41 @@
+basic-dialog {
+    --basic-dialog-control-gap: var(--basic-space-2);
+    --basic-dialog-panel-gap: var(--basic-flow-space);
+    --basic-dialog-panel-padding: var(--basic-panel-padding);
+}
+
+basic-dialog [data-dialog-open],
+basic-dialog [data-dialog-close] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--basic-dialog-control-gap);
+    padding: var(--basic-control-padding-block) var(--basic-control-padding-inline);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius-pill);
+    background: var(--basic-color-surface);
+    color: inherit;
+    cursor: pointer;
+}
+
+basic-dialog [data-dialog-panel] {
+    width: min(var(--basic-dialog-width, 32rem), var(--basic-dialog-max-width, calc(100vw - 2rem)));
+    max-width: var(--basic-dialog-max-width, calc(100vw - 2rem));
+    padding: var(--basic-dialog-panel-padding);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius);
+    background: var(--basic-color-surface);
+}
+
+basic-dialog [data-dialog-panel] > :where(*) {
+    margin-block: 0;
+}
+
+basic-dialog [data-dialog-panel] > :where(* + *) {
+    margin-block-start: var(--basic-dialog-panel-gap);
+}
+
+basic-dialog [data-dialog-title] {
+    font-size: var(--basic-font-size-title);
+    line-height: 1.2;
+}

package/basic-styling/components/basic-popover.css

@@ -0,0 +1,52 @@
+basic-popover {
+    --basic-popover-control-gap: var(--basic-space-2);
+    --basic-popover-panel-gap: var(--basic-flow-space);
+    --basic-popover-panel-padding: var(--basic-panel-padding);
+    display: inline-block;
+}
+
+basic-popover [data-popover-open],
+basic-popover [data-popover-close] {
+    --basic-interaction-surface-selected: var(--basic-color-surface-muted);
+    --basic-interaction-border-selected: var(--basic-color-border);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--basic-popover-control-gap);
+    padding: var(--basic-control-padding-block) var(--basic-control-padding-inline);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius-pill);
+    background: var(--basic-color-surface);
+    color: inherit;
+    cursor: pointer;
+}
+
+basic-popover [data-popover-panel] {
+    width: min(var(--basic-popover-width, 20rem), var(--basic-popover-max-width, calc(100vw - 2rem)));
+    max-width: var(--basic-popover-max-width, calc(100vw - 2rem));
+    padding: var(--basic-popover-panel-padding);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius);
+    background: var(--basic-color-surface);
+    color: inherit;
+}
+
+basic-popover [data-popover-panel] > :where(*) {
+    margin-block: 0;
+}
+
+basic-popover [data-popover-panel] > :where(* + *) {
+    margin-block-start: var(--basic-popover-panel-gap);
+}
+
+basic-popover [data-popover-panel] label {
+    display: flex;
+    align-items: center;
+    gap: var(--basic-space-2);
+    color: var(--basic-color-text-muted);
+}
+
+basic-popover [data-popover-title] {
+    font-size: var(--basic-font-size-title);
+    line-height: 1.2;
+}

package/basic-styling/components/basic-summary-table.css

@@ -0,0 +1,98 @@
+basic-summary-table {
+    --basic-summary-table-caption-gap: var(--basic-flow-space);
+    --basic-summary-table-cell-padding-block: var(--basic-space-3);
+    --basic-summary-table-cell-padding-inline: var(--basic-space-4);
+    --basic-summary-table-row-background-zebra: color-mix(
+        in oklch,
+        var(--basic-color-surface-muted) 48%,
+        var(--basic-color-surface)
+    );
+
+    display: block;
+    overflow-x: auto;
+}
+
+basic-summary-table table {
+    width: 100%;
+    min-width: var(--basic-summary-table-min-width, 32rem);
+    border-collapse: collapse;
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    background: var(--basic-color-surface);
+}
+
+basic-summary-table caption {
+    margin-bottom: var(--basic-summary-table-caption-gap);
+    color: var(--basic-color-text);
+    font-weight: 700;
+    text-align: left;
+}
+
+basic-summary-table tr {
+    text-align: right;
+
+    *:first-child {
+        text-align: left;
+    }
+}
+
+basic-summary-table th,
+basic-summary-table td {
+    padding: var(--basic-summary-table-cell-padding-block) var(--basic-summary-table-cell-padding-inline);
+    border: 0 solid var(--basic-color-border);
+    vertical-align: top;
+}
+
+basic-summary-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) th,
+basic-summary-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) td {
+    border-block-end-width: var(--basic-border-width);
+}
+
+basic-summary-table:is([data-separators="columns"], [data-separators="both"]) tr > :is(th, td):not(:last-child) {
+    border-inline-end-width: var(--basic-border-width);
+}
+
+basic-summary-table td {
+    font-variant-numeric: tabular-nums;
+}
+
+basic-summary-table thead th {
+    background: var(--basic-color-surface-muted);
+    font-weight: 700;
+}
+
+basic-summary-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) tbody tr:last-child th,
+basic-summary-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) tbody tr:last-child td {
+    border-block-end-width: 0;
+}
+
+basic-summary-table tbody th {
+    font-weight: 600;
+}
+
+basic-summary-table[data-zebra] tbody tr:nth-child(even) > :is(th, td) {
+    background: var(--basic-summary-table-row-background-zebra);
+}
+
+basic-summary-table tbody td {
+    color: var(--basic-color-text-muted);
+}
+
+basic-summary-table tfoot th,
+basic-summary-table tfoot td {
+    border-block-end: 0;
+    background: var(--basic-color-surface-muted);
+    font-weight: 700;
+}
+
+basic-summary-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) tfoot th,
+basic-summary-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) tfoot td {
+    border-block-start: calc(var(--basic-border-width) * 2) solid var(--basic-color-border);
+}
+
+basic-summary-table tfoot td[data-summary-empty] {
+    color: var(--basic-color-text-muted);
+}
+
+basic-summary-table tfoot td[data-summary-total] {
+    color: inherit;
+}

package/basic-styling/components/basic-table.css

@@ -0,0 +1,66 @@
+basic-table {
+    --basic-table-caption-gap: var(--basic-flow-space);
+    --basic-table-cell-padding-block: var(--basic-space-3);
+    --basic-table-cell-padding-inline: var(--basic-space-4);
+    --basic-table-row-background-zebra: color-mix(
+        in oklch,
+        var(--basic-color-surface-muted) 48%,
+        var(--basic-color-surface)
+    );
+    display: block;
+    overflow-x: auto;
+}
+
+basic-table table {
+    width: 100%;
+    min-width: var(--basic-table-min-width, 32rem);
+    border-collapse: collapse;
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    background: var(--basic-color-surface);
+}
+
+basic-table caption {
+    margin-bottom: var(--basic-table-caption-gap);
+    color: var(--basic-color-text);
+    font-weight: 700;
+    text-align: left;
+}
+
+basic-table th,
+basic-table td {
+    padding: var(--basic-table-cell-padding-block) var(--basic-table-cell-padding-inline);
+    border: 0 solid var(--basic-color-border);
+    vertical-align: top;
+    text-align: left;
+}
+
+basic-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) th,
+basic-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) td {
+    border-block-end-width: var(--basic-border-width);
+}
+
+basic-table:is([data-separators="columns"], [data-separators="both"]) tr > :is(th, td):not(:last-child) {
+    border-inline-end-width: var(--basic-border-width);
+}
+
+basic-table thead th {
+    background: var(--basic-color-surface-muted);
+    font-weight: 700;
+}
+
+basic-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) tbody tr:last-child th,
+basic-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) tbody tr:last-child td {
+    border-block-end-width: 0;
+}
+
+basic-table tbody th {
+    font-weight: 600;
+}
+
+basic-table[data-zebra] tbody tr:nth-child(even) > :is(th, td) {
+    background: var(--basic-table-row-background-zebra);
+}
+
+basic-table tbody td {
+    color: var(--basic-color-text-muted);
+}

package/basic-styling/components/basic-tabs.css

@@ -0,0 +1,61 @@
+basic-tabs {
+    --basic-tabs-list-gap: var(--basic-space-1);
+    --basic-tabs-list-padding-inline: var(--basic-space-2);
+    --basic-tabs-list-padding-block-start: var(--basic-space-2);
+    --basic-tabs-panel-padding: var(--basic-panel-padding);
+    --basic-tabs-panel-background: var(--basic-color-surface-selected);
+    --basic-tabs-panel-border: var(--basic-color-border-selected);
+    display: grid;
+    gap: 0;
+}
+
+basic-tabs [data-tabs-list] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--basic-tabs-list-gap);
+    padding-inline: var(--basic-tabs-list-padding-inline);
+    padding-block-start: var(--basic-tabs-list-padding-block-start);
+}
+
+basic-tabs [data-tab] {
+    --basic-interaction-text-rest: var(--basic-color-text-muted);
+    --basic-interaction-text-hover: var(--basic-color-text);
+    --basic-interaction-text-active: var(--basic-color-text);
+    --basic-interaction-text-selected: var(--basic-color-text);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: var(--basic-control-padding-block) var(--basic-control-padding-inline);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius) var(--basic-radius) 0 0;
+    background: transparent;
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+}
+
+basic-tabs [data-tab][aria-selected="true"] {
+    border-bottom-color: var(--basic-tabs-panel-background);
+    font-weight: 600;
+    z-index: 2;
+}
+
+basic-tabs [data-tab-panel] {
+    margin-block-start: calc(var(--basic-border-width) * -1);
+    padding: var(--basic-tabs-panel-padding);
+    border: var(--basic-border-width) solid var(--basic-tabs-panel-border);
+    border-radius: var(--basic-radius);
+    background: var(--basic-tabs-panel-background);
+    position: relative;
+    z-index: 0;
+}
+
+basic-tabs [data-tab-panel] > :where(*) {
+    margin-block: 0;
+}
+
+basic-tabs [data-tab-panel] > :where(* + *) {
+    margin-block-start: var(--basic-flow-space);
+}