@nextrap/style-utils 1.0.10 → 2.0.0

package/.ai-usage-info.md

@@ -0,0 +1,360 @@
+# @nextrap/style-utils
+
+## Purpose
+
+Provides reusable Nextrap utility classes for styling individual elements directly in markup.
+
+Use this package when HTML or Markdown content should be styled by attaching utility classes to the specific item that needs the styling instead of introducing custom one-off CSS classes.
+
+## Important rule
+
+**These styles should be used in HTML and Markdown files to individually style items.**
+
+Prefer applying the provided utility classes directly on the target element, for example on:
+
+- lists
+- text blocks
+- containers
+- rows and columns
+- borders
+- spacing wrappers
+- display or flex wrappers
+- tables
+
+Do not create new ad-hoc helper classes when an existing utility class from `@nextrap/style-utils` already fits.
+
+## Sass API and class output
+
+The main Sass entry point exports mixins only and never emits CSS:
+
+
+```scss
+@use '@nextrap/style-utils' as u;
+
+.component {
+  @include u.d-flex();
+  @include u.gap-3();
+}
+```
+
+Use the default entry point to emit all utility classes globally:
+
+```scss
+@use '@nextrap/style-utils/default';
+```
+
+Themes can emit the same complete class set under their own selector through
+the generator mixin exported by the main entry point:
+
+```scss
+@use '@nextrap/style-utils' as u;
+
+.theme-corporate {
+  @include u.style-utils();
+}
+```
+
+## Typical usage
+
+This package is intended for utility-class usage in markup.
+
+### HTML example
+
+```html
+<ul class="list-unstyled">
+  <li class="text-primary mb-2">Item 1</li>
+  <li class="text-success border-1 border-dark p-2">Item 2</li>
+</ul>
+
+<div class="row g-2">
+  <div class="col-4">Side</div>
+  <div class="col-8">Main</div>
+</div>
+```
+
+### Markdown example
+
+Use utility classes in Markdown where attribute/class syntax or embedded HTML is supported:
+
+```md
+- Item 1
+- Item 2
+- Item 3
+{: .list-unstyled }
+
+## Note
+{: .text-primary .mb-2 }
+
+<div class="border-1 border-dark p-2">Highlighted content</div>
+```
+
+## Utility classes
+
+For general usage patterns, class composition, and naming conventions, refer to the Bootstrap utilities documentation:
+
+- https://getbootstrap.com/docs/5.3/utilities/api/
+- https://getbootstrap.com/docs/5.3/utilities/spacing/
+- https://getbootstrap.com/docs/5.3/layout/grid/
+- https://getbootstrap.com/docs/5.3/utilities/flex/
+- https://getbootstrap.com/docs/5.3/utilities/colors/
+- https://getbootstrap.com/docs/5.3/utilities/borders/
+- https://getbootstrap.com/docs/5.3/utilities/text/
+
+This package follows Bootstrap-style utility usage where it makes sense, but it is **not a full Bootstrap clone**. Use the following classes that are actually provided by `@nextrap/style-utils`.
+
+### Spacing
+
+- Margin: `.m-0` ... `.m-5`
+- Margin top: `.mt-0` ... `.mt-5`, `.mt-auto`
+- Margin end: `.me-0` ... `.me-5`, `.me-auto`
+- Margin bottom: `.mb-0` ... `.mb-5`, `.mb-auto`
+- Margin start: `.ms-0` ... `.ms-5`, `.ms-auto`
+- Margin x-axis: `.mx-0` ... `.mx-5`
+- Margin y-axis: `.my-0` ... `.my-5`
+- Padding: `.p-0` ... `.p-5`
+- Padding top: `.pt-0` ... `.pt-5`
+- Padding end: `.pe-0` ... `.pe-5`
+- Padding bottom: `.pb-0` ... `.pb-5`
+- Padding start: `.ps-0` ... `.ps-5`
+- Padding x-axis: `.px-0` ... `.px-5`
+- Padding y-axis: `.py-0` ... `.py-5`
+
+### Colors, backgrounds, text colors, border colors
+
+Available base theme colors:
+
+- `primary`
+- `accent`
+- `secondary`
+- `tertiary`
+- `success`
+- `info`
+- `warning`
+- `danger`
+- `light`
+- `dark`
+- `white`
+- `black`
+
+For each base theme color above, these classes exist:
+
+- Background: `.bg-{color}`
+- Text: `.text-{color}`
+- Border: `.border-{color}`
+
+Background utilities set only the CSS `background` property. They also exist for all available `-subtle` and `-emphasis` color tokens, for example:
+
+- `.bg-primary`, `.bg-primary-subtle`, `.bg-primary-emphasis`
+- `.bg-tertiary`, `.bg-tertiary-subtle`, `.bg-tertiary-emphasis`
+- `.bg-success`, `.bg-success-subtle`, `.bg-success-emphasis`
+- `.bg-light`, `.bg-light-subtle`, `.bg-light-emphasis`
+
+Soft background aliases still exist and map to the matching subtle token:
+
+- `.bg-soft-primary` → `--nt-primary-subtle`
+- `.bg-soft-accent` → `--nt-accent-subtle`
+- `.bg-soft-secondary` → `--nt-secondary-subtle`
+- `.bg-soft-tertiary` → `--nt-tertiary-subtle`
+- `.bg-soft-success` → `--nt-success-subtle`
+- `.bg-soft-info` → `--nt-info-subtle`
+- `.bg-soft-warning` → `--nt-warning-subtle`
+- `.bg-soft-danger` → `--nt-danger-subtle`
+- `.bg-soft-light` → `--nt-light-subtle`
+- `.bg-soft-dark` → `--nt-dark-subtle`
+
+Gray utilities:
+
+- Backgrounds: `.bg-gray`, `.bg-gray-dark`, `.bg-gray-100`, `.bg-gray-200`, `.bg-gray-300`, `.bg-gray-400`, `.bg-gray-500`, `.bg-gray-600`, `.bg-gray-700`, `.bg-gray-800`, `.bg-gray-900`
+- Text: `.text-gray-1`, `.text-gray-2`, `.text-gray-3`, `.text-gray-4`, `.text-gray-5`, `.text-gray-6`, `.text-gray-7`, `.text-gray-8`, `.text-gray-9`
+- Border: `.border-gray-1`, `.border-gray-2`, `.border-gray-3`, `.border-gray-4`, `.border-gray-5`, `.border-gray-6`, `.border-gray-7`, `.border-gray-8`, `.border-gray-9`
+- Auto text color from active context: `.text-auto`
+
+### Font utilities
+
+- Font sizes: `.fs-1`, `.fs-2`, `.fs-3`, `.fs-4`, `.fs-5`, `.fs-6`
+- Font weight: `.fw-light`, `.fw-lighter`, `.fw-normal`, `.fw-medium`, `.fw-semibold`, `.fw-bold`, `.fw-bolder`
+- Font style: `.fst-italic`, `.fst-normal`
+- Line height: `.lh-1`, `.lh-sm`, `.lh-base`, `.lh-lg`
+- Family/reset: `.font-monospace`, `.text-reset`
+
+Semantic surface utilities override the real `style-base` tokens locally (`--nt-text`, `--nt-text-muted`, `--nt-header`, `--nt-link`, `--nt-link-hover`). Do not introduce a parallel `--nt-surface-*` token contract.
+
+### Grid, row, column, gutter
+
+- Row wrapper: `.row`
+- Auto/equal columns: `.col`, `.col-auto`
+- Fixed columns: `.col-1` ... `.col-12`
+- Offsets: `.offset-1` ... `.offset-12`
+- Row column count: `.row-cols-1` ... `.row-cols-6`
+- Gutters: `.g-0` ... `.g-6`
+- Horizontal gutters: `.gx-0` ... `.gx-6`
+- Vertical gutters: `.gy-0` ... `.gy-6`
+
+### Borders and radius
+
+- Base border: `.border`
+- Border sides: `.border-top`, `.border-end`, `.border-bottom`, `.border-start`
+- Remove borders: `.border-0`, `.border-top-0`, `.border-end-0`, `.border-bottom-0`, `.border-start-0`
+- Border widths: `.border-1`, `.border-2`, `.border-3`, `.border-4`, `.border-5`
+- Border opacity: `.border-opacity-10`, `.border-opacity-25`, `.border-opacity-50`, `.border-opacity-75`, `.border-opacity-100`
+- Border radius: `.rounded`, `.rounded-0`, `.rounded-1`, `.rounded-2`, `.rounded-3`, `.rounded-4`, `.rounded-5`
+- Side radius: `.rounded-top`, `.rounded-top-0` ... `.rounded-top-5`
+- Side radius: `.rounded-end`, `.rounded-end-0` ... `.rounded-end-5`
+- Side radius: `.rounded-bottom`, `.rounded-bottom-0` ... `.rounded-bottom-5`
+- Side radius: `.rounded-start`, `.rounded-start-0` ... `.rounded-start-5`
+- Circle radius: `.rounded-circle`, `.rounded-circle-0`, `.rounded-circle-1`, `.rounded-circle-2`, `.rounded-circle-3`, `.rounded-circle-4`, `.rounded-circle-5`
+- Pill radius: `.rounded-pill`, `.rounded-pill-0`, `.rounded-pill-1`, `.rounded-pill-2`, `.rounded-pill-3`, `.rounded-pill-4`, `.rounded-pill-5`
+
+### Containers
+
+- `.container`
+- `.container-fluid`
+
+### Display
+
+- `.d-none`
+- `.d-inline`
+- `.d-inline-block`
+- `.d-block`
+- `.d-flex`
+- `.d-inline-flex`
+- `.d-grid`
+- `.d-inline-grid`
+- `.d-table`
+- `.d-table-row`
+- `.d-table-cell`
+
+### Flex
+
+Direction:
+
+- `.flex-column`
+- `.flex-row`
+- `.flex-column-reverse`
+- `.flex-row-reverse`
+
+Wrap:
+
+- `.flex-wrap`
+- `.flex-nowrap`
+- `.flex-wrap-reverse`
+
+Justify content:
+
+- `.justify-content-start`
+- `.justify-content-end`
+- `.justify-content-center`
+- `.justify-content-between`
+- `.justify-content-around`
+- `.justify-content-evenly`
+
+Align items:
+
+- `.align-items-start`
+- `.align-items-end`
+- `.align-items-center`
+- `.align-items-baseline`
+- `.align-items-stretch`
+
+Align content:
+
+- `.align-content-start`
+- `.align-content-end`
+- `.align-content-center`
+- `.align-content-between`
+- `.align-content-around`
+- `.align-content-stretch`
+
+Align self:
+
+- `.align-self-auto`
+- `.align-self-start`
+- `.align-self-end`
+- `.align-self-center`
+- `.align-self-baseline`
+- `.align-self-stretch`
+
+Grow/shrink/fill/order:
+
+- `.flex-fill`
+- `.flex-grow-0`, `.flex-grow-1`
+- `.flex-shrink-0`, `.flex-shrink-1`
+- `.order-first`
+- `.order-0`, `.order-1`, `.order-2`, `.order-3`, `.order-4`, `.order-5`
+- `.order-last`
+
+Flex gaps:
+
+- `.gap-0`, `.gap-1`, `.gap-2`, `.gap-3`, `.gap-4`, `.gap-5`
+- `.gap-x-1`, `.gap-x-2`, `.gap-x-3`, `.gap-x-4`, `.gap-x-5`
+- `.gap-y-1`, `.gap-y-2`, `.gap-y-3`, `.gap-y-4`, `.gap-y-5`
+
+### List styles
+
+- `.list-unstyled`
+- `.list-inline`
+- `.list-checked`
+- Item modifiers inside `.list-checked`: `.list-item-removed`, `.list-item-unavailable`
+
+### Dimensions
+
+Width:
+
+- `.w-100`
+- `.w-75`
+- `.w-50`
+- `.w-25`
+- `.w-auto`
+
+Height:
+
+- `.h-100`
+- `.h-75`
+- `.h-50`
+- `.h-25`
+- `.h-auto`
+
+Viewport:
+
+- `.vw-100`
+- `.vh-100`
+
+### Text
+
+Alignment:
+
+- `.text-start`
+- `.text-end`
+- `.text-center`
+
+Wrapping and overflow:
+
+- `.text-wrap`
+- `.text-nowrap`
+- `.text-break`
+- `.text-truncate`
+
+Transform:
+
+- `.text-lowercase`
+- `.text-uppercase`
+- `.text-capitalize`
+
+Decoration:
+
+- `.text-decoration-none`
+- `.text-decoration-underline`
+- `.text-decoration-line-through`
+
+### Tables
+
+- `.table`
+- `.table-bordered`
+
+## Architecture contract for style packages
+
+- Follow the shared contract in `docs/style-packages-architecture.md`.
+- Public utility classes should have same-named public mixins where meaningful (for example `.mt-2` ↔ `mt-2()`).
+- Class output must be generated from those mixins (single source of truth).
+- Base/modifier composition and arbitrary-selector usage must remain possible in Sass usage.
+- Keep token usage based on `var(--nt-*)` interoperability.

package/README.md

@@ -10,6 +10,32 @@ The can be used in combination with [TrunkJS Responsive](https://github.com/trun
 
 - [Utility Classes](https://getbootstrap.com/docs/5.3/utilities/)
 
+## Sass entry points
+
+`@nextrap/style-utils` is a mixin-only Sass API and does not emit CSS. It
+exports every individual utility mixin plus `style-utils()` from `_style-utils.scss`:
+
+```scss
+@use '@nextrap/style-utils' as u;
+
+.card {
+  @include u.d-flex();
+  @include u.gap-3();
+}
+
+.theme-corporate {
+  @include u.style-utils();
+}
+```
+
+The scoped include above generates selectors such as
+`.theme-corporate .d-flex`. To generate the complete class set globally, use
+the default entry point instead:
+
+```scss
+@use '@nextrap/style-utils/default';
+```
+
 
 
 ## Contents
@@ -18,4 +44,4 @@ The can be used in combination with [TrunkJS Responsive](https://github.com/trun
 
 - `.bg-primary`
 - `.bg-secondary`
-- `.bg-success`
+- `.bg-success`

package/default.scss

@@ -0,0 +1,5 @@
+// @nextrap/style-utils/default — materializes all utility classes globally.
+
+@use './index' as u;
+
+@include u.style-utils();

package/ex-01-grid.html

@@ -0,0 +1,6 @@
+<h2>Grid</h2>
+
+<div class="row g-4">
+  <div class="col-4">side</div>
+  <div class="col-8">Main</div>
+</div>

package/index.css

@@ -1 +1 @@
-.m-1{margin:var(--nt-space-1)!important}.mt-1{margin-top:var(--nt-space-1)!important}.me-1{margin-right:var(--nt-space-1)!important}.mb-1{margin-bottom:var(--nt-space-1)!important}.ms-1{margin-left:var(--nt-space-1)!important}.mx-1{margin-inline:var(--nt-space-1)!important}.my-1{margin-block:var(--nt-space-1)!important}.p-1{padding:var(--nt-space-1)!important}.pt-1{padding-top:var(--nt-space-1)!important}.pe-1{padding-right:var(--nt-space-1)!important}.pb-1{padding-bottom:var(--nt-space-1)!important}.ps-1{padding-left:var(--nt-space-1)!important}.px-1{padding-inline:var(--nt-space-1)!important}.py-1{padding-block:var(--nt-space-1)!important}.m-2{margin:var(--nt-space-2)!important}.mt-2{margin-top:var(--nt-space-2)!important}.me-2{margin-right:var(--nt-space-2)!important}.mb-2{margin-bottom:var(--nt-space-2)!important}.ms-2{margin-left:var(--nt-space-2)!important}.mx-2{margin-inline:var(--nt-space-2)!important}.my-2{margin-block:var(--nt-space-2)!important}.p-2{padding:var(--nt-space-2)!important}.pt-2{padding-top:var(--nt-space-2)!important}.pe-2{padding-right:var(--nt-space-2)!important}.pb-2{padding-bottom:var(--nt-space-2)!important}.ps-2{padding-left:var(--nt-space-2)!important}.px-2{padding-inline:var(--nt-space-2)!important}.py-2{padding-block:var(--nt-space-2)!important}.m-3{margin:var(--nt-space-3)!important}.mt-3{margin-top:var(--nt-space-3)!important}.me-3{margin-right:var(--nt-space-3)!important}.mb-3{margin-bottom:var(--nt-space-3)!important}.ms-3{margin-left:var(--nt-space-3)!important}.mx-3{margin-inline:var(--nt-space-3)!important}.my-3{margin-block:var(--nt-space-3)!important}.p-3{padding:var(--nt-space-3)!important}.pt-3{padding-top:var(--nt-space-3)!important}.pe-3{padding-right:var(--nt-space-3)!important}.pb-3{padding-bottom:var(--nt-space-3)!important}.ps-3{padding-left:var(--nt-space-3)!important}.px-3{padding-inline:var(--nt-space-3)!important}.py-3{padding-block:var(--nt-space-3)!important}.m-4{margin:var(--nt-space-4)!important}.mt-4{margin-top:var(--nt-space-4)!important}.me-4{margin-right:var(--nt-space-4)!important}.mb-4{margin-bottom:var(--nt-space-4)!important}.ms-4{margin-left:var(--nt-space-4)!important}.mx-4{margin-inline:var(--nt-space-4)!important}.my-4{margin-block:var(--nt-space-4)!important}.p-4{padding:var(--nt-space-4)!important}.pt-4{padding-top:var(--nt-space-4)!important}.pe-4{padding-right:var(--nt-space-4)!important}.pb-4{padding-bottom:var(--nt-space-4)!important}.ps-4{padding-left:var(--nt-space-4)!important}.px-4{padding-inline:var(--nt-space-4)!important}.py-4{padding-block:var(--nt-space-4)!important}.m-5{margin:var(--nt-space-5)!important}.mt-5{margin-top:var(--nt-space-5)!important}.me-5{margin-right:var(--nt-space-5)!important}.mb-5{margin-bottom:var(--nt-space-5)!important}.ms-5{margin-left:var(--nt-space-5)!important}.mx-5{margin-inline:var(--nt-space-5)!important}.my-5{margin-block:var(--nt-space-5)!important}.p-5{padding:var(--nt-space-5)!important}.pt-5{padding-top:var(--nt-space-5)!important}.pe-5{padding-right:var(--nt-space-5)!important}.pb-5{padding-bottom:var(--nt-space-5)!important}.ps-5{padding-left:var(--nt-space-5)!important}.px-5{padding-inline:var(--nt-space-5)!important}.py-5{padding-block:var(--nt-space-5)!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.me-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ms-0{margin-left:0!important}.mx-0{margin-inline:0!important}.my-0{margin-block:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pe-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.ps-0{padding-left:0!important}.px-0{padding-inline:0!important}.py-0{padding-block:0!important}.content-space-top-0{margin-top:0!important}.content-space-bottom-0{margin-bottom:0!important}.content-space-0{margin-block:0!important}.content-space-top-0{margin-top:calc(var(--content-space-0) * 0)!important}.content-space-bottom-0{margin-bottom:calc(var(--content-space-0) * 0)!important}.content-space-0{margin-block:calc(var(--content-space-0) * 0)!important}.content-space-top-1{margin-top:calc(var(--content-space-1) * 1)!important}.content-space-bottom-1{margin-bottom:calc(var(--content-space-1) * 1)!important}.content-space-1{margin-block:calc(var(--content-space-1) * 1)!important}.content-space-top-2{margin-top:calc(var(--content-space-2) * 2)!important}.content-space-bottom-2{margin-bottom:calc(var(--content-space-2) * 2)!important}.content-space-2{margin-block:calc(var(--content-space-2) * 2)!important}.content-space-top-3{margin-top:calc(var(--content-space-3) * 3)!important}.content-space-bottom-3{margin-bottom:calc(var(--content-space-3) * 3)!important}.content-space-3{margin-block:calc(var(--content-space-3) * 3)!important}.content-space-top-4{margin-top:calc(var(--content-space-4) * 4)!important}.content-space-bottom-4{margin-bottom:calc(var(--content-space-4) * 4)!important}.content-space-4{margin-block:calc(var(--content-space-4) * 4)!important}.content-space-top-5{margin-top:calc(var(--content-space-5) * 5)!important}.content-space-bottom-5{margin-bottom:calc(var(--content-space-5) * 5)!important}.content-space-5{margin-block:calc(var(--content-space-5) * 5)!important}.bg-primary{background-color:var(--nt-primary)!important;--background-color: var(--nt-primary) !important;--text-color: var(--nt-text-on-primary) !important}.text-primary{--text-color: var(--nt-primary) !important;color:var(--nt-primary)!important}.border-primary{--border-color: var(--nt-primary) !important;border-color:var(--nt-primary)!important}.bg-accent{background-color:var(--nt-accent)!important;--background-color: var(--nt-accent) !important;--text-color: var(--nt-text-on-accent) !important}.text-accent{--text-color: var(--nt-accent) !important;color:var(--nt-accent)!important}.border-accent{--border-color: var(--nt-accent) !important;border-color:var(--nt-accent)!important}.bg-secondary{background-color:var(--nt-secondary)!important;--background-color: var(--nt-secondary) !important;--text-color: var(--nt-text-on-secondary) !important}.text-secondary{--text-color: var(--nt-secondary) !important;color:var(--nt-secondary)!important}.border-secondary{--border-color: var(--nt-secondary) !important;border-color:var(--nt-secondary)!important}.bg-success{background-color:var(--nt-success)!important;--background-color: var(--nt-success) !important;--text-color: var(--nt-text-on-success) !important}.text-success{--text-color: var(--nt-success) !important;color:var(--nt-success)!important}.border-success{--border-color: var(--nt-success) !important;border-color:var(--nt-success)!important}.bg-info{background-color:var(--nt-info)!important;--background-color: var(--nt-info) !important;--text-color: var(--nt-text-on-info) !important}.text-info{--text-color: var(--nt-info) !important;color:var(--nt-info)!important}.border-info{--border-color: var(--nt-info) !important;border-color:var(--nt-info)!important}.bg-warning{background-color:var(--nt-warning)!important;--background-color: var(--nt-warning) !important;--text-color: var(--nt-text-on-warning) !important}.text-warning{--text-color: var(--nt-warning) !important;color:var(--nt-warning)!important}.border-warning{--border-color: var(--nt-warning) !important;border-color:var(--nt-warning)!important}.bg-danger{background-color:var(--nt-danger)!important;--background-color: var(--nt-danger) !important;--text-color: var(--nt-text-on-danger) !important}.text-danger{--text-color: var(--nt-danger) !important;color:var(--nt-danger)!important}.border-danger{--border-color: var(--nt-danger) !important;border-color:var(--nt-danger)!important}.bg-light{background-color:var(--nt-light)!important;--background-color: var(--nt-light) !important;--text-color: var(--nt-text-on-light) !important}.text-light{--text-color: var(--nt-light) !important;color:var(--nt-light)!important}.border-light{--border-color: var(--nt-light) !important;border-color:var(--nt-light)!important}.bg-dark{background-color:var(--nt-dark)!important;--background-color: var(--nt-dark) !important;--text-color: var(--nt-text-on-dark) !important}.text-dark{--text-color: var(--nt-dark) !important;color:var(--nt-dark)!important}.border-dark{--border-color: var(--nt-dark) !important;border-color:var(--nt-dark)!important}.bg-white{background-color:var(--nt-white)!important;--background-color: var(--nt-white) !important;--text-color: var(--nt-text-on-white) !important}.text-white{--text-color: var(--nt-white) !important;color:var(--nt-white)!important}.border-white{--border-color: var(--nt-white) !important;border-color:var(--nt-white)!important}.bg-black{background-color:var(--nt-black)!important;--background-color: var(--nt-black) !important;--text-color: var(--nt-text-on-black) !important}.text-black{--text-color: var(--nt-black) !important;color:var(--nt-black)!important}.border-black{--border-color: var(--nt-black) !important;border-color:var(--nt-black)!important}.bg-soft-primary{background-color:var(--background-color)!important;--background-color: var(--nt-soft-primary) !important;--text-color: var(--nt-text-on-soft-primary) !important}.bg-soft-accent{background-color:var(--background-color)!important;--background-color: var(--nt-soft-accent) !important;--text-color: var(--nt-text-on-soft-accent) !important}.bg-soft-secondary{background-color:var(--background-color)!important;--background-color: var(--nt-soft-secondary) !important;--text-color: var(--nt-text-on-soft-secondary) !important}.bg-soft-success{background-color:var(--background-color)!important;--background-color: var(--nt-soft-success) !important;--text-color: var(--nt-text-on-soft-success) !important}.bg-soft-info{background-color:var(--background-color)!important;--background-color: var(--nt-soft-info) !important;--text-color: var(--nt-text-on-soft-info) !important}.bg-soft-warning{background-color:var(--background-color)!important;--background-color: var(--nt-soft-warning) !important;--text-color: var(--nt-text-on-soft-warning) !important}.bg-soft-danger{background-color:var(--background-color)!important;--background-color: var(--nt-soft-danger) !important;--text-color: var(--nt-text-on-soft-danger) !important}.bg-soft-light{background-color:var(--background-color)!important;--background-color: var(--nt-soft-light) !important;--text-color: var(--nt-text-on-soft-light) !important}.bg-soft-dark{background-color:var(--background-color)!important;--background-color: var(--nt-soft-dark) !important;--text-color: var(--nt-text-on-soft-dark) !important}.text-auto{color:var(--text-color)!important}.fs-1{font-size:var(--nt-fs-1)!important;line-height:var(--nt-line-height)!important}.fs-2{font-size:var(--nt-fs-2)!important;line-height:var(--nt-line-height)!important}.fs-3{font-size:var(--nt-fs-3)!important;line-height:var(--nt-line-height)!important}.fs-4{font-size:var(--nt-fs-4)!important;line-height:var(--nt-line-height)!important}.fs-5{font-size:var(--nt-fs-5)!important;line-height:var(--nt-line-height)!important}.fs-6{font-size:var(--nt-fs-6)!important;line-height:var(--nt-line-height)!important}.row{--gutter-x: var(--nt-gap, 1rem);--gutter-y: 0;display:flex;flex-direction:row;flex-wrap:wrap}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--gutter-x) * .5);padding-left:calc(var(--gutter-x) * .5);margin-top:var(--gutter-y)}.row-cols-1>*{flex:0 0 100%;width:100%}.row-cols-2>*{flex:0 0 50%;width:50%}.row-cols-3>*{flex:0 0 33.3333333333%;width:33.3333333333%}.row-cols-4>*{flex:0 0 25%;width:25%}.row-cols-5>*{flex:0 0 20%;width:20%}.row-cols-6>*{flex:0 0 16.6666666667%;width:16.6666666667%}.col-auto{flex:0 0 auto;width:auto}.col{flex:1 0 0}.col-1{flex:0 0 auto;width:8.3333333333%}.col-2{flex:0 0 auto;width:16.6666666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.3333333333%}.col-5{flex:0 0 auto;width:41.6666666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.3333333333%}.col-8{flex:0 0 auto;width:66.6666666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.3333333333%}.col-11{flex:0 0 auto;width:91.6666666667%}.col-12{flex:0 0 auto;width:100%}.g-0{--gutter-y: calc(0 * var(--nt-base-gap, 1rem));--gutter-x: calc(0 * var(--nt-base-gap, 1rem))}.gx-0{--nt-gap: 0;--gutter-x: calc(0 * var(--nt-base-gap, 1rem))}.gy-0{--nt-gap: calc(0 * var(--nt-base-gap, 1rem));--gutter-y: 0}.g-1{--gutter-y: calc(1 * var(--nt-base-gap, 1rem));--gutter-x: calc(1 * var(--nt-base-gap, 1rem))}.gx-1{--nt-gap: 0;--gutter-x: calc(1 * var(--nt-base-gap, 1rem))}.gy-1{--nt-gap: calc(1 * var(--nt-base-gap, 1rem));--gutter-y: 0}.g-2{--gutter-y: calc(2 * var(--nt-base-gap, 1rem));--gutter-x: calc(2 * var(--nt-base-gap, 1rem))}.gx-2{--nt-gap: 0;--gutter-x: calc(2 * var(--nt-base-gap, 1rem))}.gy-2{--nt-gap: calc(2 * var(--nt-base-gap, 1rem));--gutter-y: 0}.g-3{--gutter-y: calc(3 * var(--nt-base-gap, 1rem));--gutter-x: calc(3 * var(--nt-base-gap, 1rem))}.gx-3{--nt-gap: 0;--gutter-x: calc(3 * var(--nt-base-gap, 1rem))}.gy-3{--nt-gap: calc(3 * var(--nt-base-gap, 1rem));--gutter-y: 0}.g-4{--gutter-y: calc(4 * var(--nt-base-gap, 1rem));--gutter-x: calc(4 * var(--nt-base-gap, 1rem))}.gx-4{--nt-gap: 0;--gutter-x: calc(4 * var(--nt-base-gap, 1rem))}.gy-4{--nt-gap: calc(4 * var(--nt-base-gap, 1rem));--gutter-y: 0}.g-5{--gutter-y: calc(5 * var(--nt-base-gap, 1rem));--gutter-x: calc(5 * var(--nt-base-gap, 1rem))}.gx-5{--nt-gap: 0;--gutter-x: calc(5 * var(--nt-base-gap, 1rem))}.gy-5{--nt-gap: calc(5 * var(--nt-base-gap, 1rem));--gutter-y: 0}.g-6{--gutter-y: calc(6 * var(--nt-base-gap, 1rem));--gutter-x: calc(6 * var(--nt-base-gap, 1rem))}.gx-6{--nt-gap: 0;--gutter-x: calc(6 * var(--nt-base-gap, 1rem))}.gy-6{--nt-gap: calc(6 * var(--nt-base-gap, 1rem));--gutter-y: 0}.border{--border-width: var(--nt-border-width, 1px);--border-style: solid;--border-color: var(--nt-primary);border:var(--border-width) var(--border-style) var(--border-color)!important}.border-top{border-top:var(--nt-border-width) solid rgb(from var(--border-color, var(--nt-dark)) r g b/var(--border-opacity, 1))!important}.border-end{border-inline-end:var(--nt-border-width) solid rgb(from var(--border-color, var(--nt-dark)) r g b/var(--border-opacity, 1))!important}.border-bottom{border-bottom:var(--nt-border-width) solid rgb(from var(--border-color, var(--nt-dark)) r g b/var(--border-opacity, 1))!important}.border-start{border-inline-start:var(--nt-border-width) solid rgb(from var(--border-color, var(--nt-dark)) r g b/var(--border-opacity, 1))!important}.border-0{border:0!important}.border-top-0{border-top:0!important}.border-end-0{border-inline-end:0!important}.border-bottom-0{border-bottom:0!important}.border-start-0{border-inline-start:0!important}.border-1{border-width:1px!important}.border-2{border-width:2px!important}.border-3{border-width:3px!important}.border-4{border-width:4px!important}.border-5{border-width:5px!important}.border-primary{--border-color: rgb(from var(--nt-primary) r g b / var(--border-opacity, 1)) !important}.border-secondary{--border-color: rgb(from var(--nt-secondary) r g b / var(--border-opacity, 1)) !important}.border-accent{--border-color: rgb(from var(--nt-accent) r g b / var(--border-opacity, 1)) !important}.border-success{--border-color: rgb(from var(--nt-success) r g b / var(--border-opacity, 1)) !important}.border-info{--border-color: rgb(from var(--nt-info) r g b / var(--border-opacity, 1)) !important}.border-warning{--border-color: rgb(from var(--nt-warning) r g b / var(--border-opacity, 1)) !important}.border-danger{--border-color: rgb(from var(--nt-danger) r g b / var(--border-opacity, 1)) !important}.border-light{--border-color: rgb(from var(--nt-light) r g b / var(--border-opacity, 1)) !important}.border-dark{--border-color: rgb(from var(--nt-dark) r g b / var(--border-opacity, 1)) !important}.border-white{--border-color: rgb(from var(--nt-white) r g b / var(--border-opacity, 1)) !important}.border-black{--border-color: rgb(from var(--nt-black) r g b / var(--border-opacity, 1)) !important}.border-opacity-10{--border-opacity: .1}.border-opacity-25{--border-opacity: .25}.border-opacity-50{--border-opacity: .5}.border-opacity-75{--border-opacity: .75}.border-opacity-100{--border-opacity: 1}.rounded{border-radius:calc(var(--nt-border-radius) * 1)!important}.rounded-0{border-radius:calc(var(--nt-border-radius) * 0)!important}.rounded-1{border-radius:calc(var(--nt-border-radius) * .25)!important}.rounded-2{border-radius:calc(var(--nt-border-radius) * .5)!important}.rounded-3{border-radius:calc(var(--nt-border-radius) * 1)!important}.rounded-4{border-radius:calc(var(--nt-border-radius) * 1.5)!important}.rounded-5{border-radius:calc(var(--nt-border-radius) * 3)!important}.rounded-top{border-top-left-radius:calc(var(--nt-border-radius) * 1)!important;border-top-right-radius:calc(var(--nt-border-radius) * 1)!important}.rounded-end{border-top-right-radius:calc(var(--nt-border-radius) * 1)!important;border-bottom-right-radius:calc(var(--nt-border-radius) * 1)!important}.rounded-bottom{border-bottom-right-radius:calc(var(--nt-border-radius) * 1)!important;border-bottom-left-radius:calc(var(--nt-border-radius) * 1)!important}.rounded-start{border-top-left-radius:calc(var(--nt-border-radius) * 1)!important;border-bottom-left-radius:calc(var(--nt-border-radius) * 1)!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:50rem!important}.rounded-top-0{border-top-left-radius:calc(var(--nt-border-radius) * 0)!important;border-top-right-radius:calc(var(--nt-border-radius) * 0)!important}.rounded-end-0{border-top-right-radius:calc(var(--nt-border-radius) * 0)!important;border-bottom-right-radius:calc(var(--nt-border-radius) * 0)!important}.rounded-bottom-0{border-bottom-right-radius:calc(var(--nt-border-radius) * 0)!important;border-bottom-left-radius:calc(var(--nt-border-radius) * 0)!important}.rounded-start-0{border-top-left-radius:calc(var(--nt-border-radius) * 0)!important;border-bottom-left-radius:calc(var(--nt-border-radius) * 0)!important}.rounded-circle-0{border-radius:50%!important}.rounded-pill-0{border-radius:50rem!important}.rounded-top-1{border-top-left-radius:calc(var(--nt-border-radius) * .25)!important;border-top-right-radius:calc(var(--nt-border-radius) * .25)!important}.rounded-end-1{border-top-right-radius:calc(var(--nt-border-radius) * .25)!important;border-bottom-right-radius:calc(var(--nt-border-radius) * .25)!important}.rounded-bottom-1{border-bottom-right-radius:calc(var(--nt-border-radius) * .25)!important;border-bottom-left-radius:calc(var(--nt-border-radius) * .25)!important}.rounded-start-1{border-top-left-radius:calc(var(--nt-border-radius) * .25)!important;border-bottom-left-radius:calc(var(--nt-border-radius) * .25)!important}.rounded-circle-1{border-radius:50%!important}.rounded-pill-1{border-radius:50rem!important}.rounded-top-2{border-top-left-radius:calc(var(--nt-border-radius) * .5)!important;border-top-right-radius:calc(var(--nt-border-radius) * .5)!important}.rounded-end-2{border-top-right-radius:calc(var(--nt-border-radius) * .5)!important;border-bottom-right-radius:calc(var(--nt-border-radius) * .5)!important}.rounded-bottom-2{border-bottom-right-radius:calc(var(--nt-border-radius) * .5)!important;border-bottom-left-radius:calc(var(--nt-border-radius) * .5)!important}.rounded-start-2{border-top-left-radius:calc(var(--nt-border-radius) * .5)!important;border-bottom-left-radius:calc(var(--nt-border-radius) * .5)!important}.rounded-circle-2{border-radius:50%!important}.rounded-pill-2{border-radius:50rem!important}.rounded-top-3{border-top-left-radius:calc(var(--nt-border-radius) * 1)!important;border-top-right-radius:calc(var(--nt-border-radius) * 1)!important}.rounded-end-3{border-top-right-radius:calc(var(--nt-border-radius) * 1)!important;border-bottom-right-radius:calc(var(--nt-border-radius) * 1)!important}.rounded-bottom-3{border-bottom-right-radius:calc(var(--nt-border-radius) * 1)!important;border-bottom-left-radius:calc(var(--nt-border-radius) * 1)!important}.rounded-start-3{border-top-left-radius:calc(var(--nt-border-radius) * 1)!important;border-bottom-left-radius:calc(var(--nt-border-radius) * 1)!important}.rounded-circle-3{border-radius:50%!important}.rounded-pill-3{border-radius:50rem!important}.rounded-top-4{border-top-left-radius:calc(var(--nt-border-radius) * 1.5)!important;border-top-right-radius:calc(var(--nt-border-radius) * 1.5)!important}.rounded-end-4{border-top-right-radius:calc(var(--nt-border-radius) * 1.5)!important;border-bottom-right-radius:calc(var(--nt-border-radius) * 1.5)!important}.rounded-bottom-4{border-bottom-right-radius:calc(var(--nt-border-radius) * 1.5)!important;border-bottom-left-radius:calc(var(--nt-border-radius) * 1.5)!important}.rounded-start-4{border-top-left-radius:calc(var(--nt-border-radius) * 1.5)!important;border-bottom-left-radius:calc(var(--nt-border-radius) * 1.5)!important}.rounded-circle-4{border-radius:50%!important}.rounded-pill-4{border-radius:50rem!important}.rounded-top-5{border-top-left-radius:calc(var(--nt-border-radius) * 3)!important;border-top-right-radius:calc(var(--nt-border-radius) * 3)!important}.rounded-end-5{border-top-right-radius:calc(var(--nt-border-radius) * 3)!important;border-bottom-right-radius:calc(var(--nt-border-radius) * 3)!important}.rounded-bottom-5{border-bottom-right-radius:calc(var(--nt-border-radius) * 3)!important;border-bottom-left-radius:calc(var(--nt-border-radius) * 3)!important}.rounded-start-5{border-top-left-radius:calc(var(--nt-border-radius) * 3)!important;border-bottom-left-radius:calc(var(--nt-border-radius) * 3)!important}.rounded-circle-5{border-radius:50%!important}.rounded-pill-5{border-radius:50rem!important}.container{width:var(--nt-container-width);margin:0 auto}.container-fluid{width:100%;margin:0 auto}
+@charset "UTF-8";.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-grid{display:grid!important}.d-inline-grid{display:inline-grid!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.flex-column{flex-direction:column!important}.flex-row{flex-direction:row!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.flex-fill{flex:1 1 auto!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.gap-0{gap:0!important}.gap-1{gap:var(--nt-space-1)!important}.gap-2{gap:var(--nt-space-2)!important}.gap-3{gap:var(--nt-space-3)!important}.gap-4{gap:var(--nt-space-4)!important}.gap-5{gap:var(--nt-space-5)!important}.gap-x-1{column-gap:var(--nt-space-1)!important}.gap-x-2{column-gap:var(--nt-space-2)!important}.gap-x-3{column-gap:var(--nt-space-3)!important}.gap-x-4{column-gap:var(--nt-space-4)!important}.gap-x-5{column-gap:var(--nt-space-5)!important}.gap-y-1{row-gap:var(--nt-space-1)!important}.gap-y-2{row-gap:var(--nt-space-2)!important}.gap-y-3{row-gap:var(--nt-space-3)!important}.gap-y-4{row-gap:var(--nt-space-4)!important}.gap-y-5{row-gap:var(--nt-space-5)!important}.m-0{margin:0!important}.m-1{margin:var(--nt-space-1)!important}.m-2{margin:var(--nt-space-2)!important}.m-3{margin:var(--nt-space-3)!important}.m-4{margin:var(--nt-space-4)!important}.m-5{margin:var(--nt-space-5)!important}.m-auto{margin:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:var(--nt-space-1)!important}.mt-2{margin-top:var(--nt-space-2)!important}.mt-3{margin-top:var(--nt-space-3)!important}.mt-4{margin-top:var(--nt-space-4)!important}.mt-5{margin-top:var(--nt-space-5)!important}.mt-auto{margin-top:auto!important}.me-0{margin-right:0!important}.me-1{margin-right:var(--nt-space-1)!important}.me-2{margin-right:var(--nt-space-2)!important}.me-3{margin-right:var(--nt-space-3)!important}.me-4{margin-right:var(--nt-space-4)!important}.me-5{margin-right:var(--nt-space-5)!important}.me-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:var(--nt-space-1)!important}.mb-2{margin-bottom:var(--nt-space-2)!important}.mb-3{margin-bottom:var(--nt-space-3)!important}.mb-4{margin-bottom:var(--nt-space-4)!important}.mb-5{margin-bottom:var(--nt-space-5)!important}.mb-auto{margin-bottom:auto!important}.ms-0{margin-left:0!important}.ms-1{margin-left:var(--nt-space-1)!important}.ms-2{margin-left:var(--nt-space-2)!important}.ms-3{margin-left:var(--nt-space-3)!important}.ms-4{margin-left:var(--nt-space-4)!important}.ms-5{margin-left:var(--nt-space-5)!important}.ms-auto{margin-left:auto!important}.mx-0{margin-inline:0!important}.mx-1{margin-inline:var(--nt-space-1)!important}.mx-2{margin-inline:var(--nt-space-2)!important}.mx-3{margin-inline:var(--nt-space-3)!important}.mx-4{margin-inline:var(--nt-space-4)!important}.mx-5{margin-inline:var(--nt-space-5)!important}.mx-auto{margin-inline:auto!important}.my-0{margin-block:0!important}.my-1{margin-block:var(--nt-space-1)!important}.my-2{margin-block:var(--nt-space-2)!important}.my-3{margin-block:var(--nt-space-3)!important}.my-4{margin-block:var(--nt-space-4)!important}.my-5{margin-block:var(--nt-space-5)!important}.my-auto{margin-block:auto!important}.p-0{padding:0!important}.p-1{padding:var(--nt-space-1)!important}.p-2{padding:var(--nt-space-2)!important}.p-3{padding:var(--nt-space-3)!important}.p-4{padding:var(--nt-space-4)!important}.p-5{padding:var(--nt-space-5)!important}.p-auto{padding:auto!important}.pt-0{padding-top:0!important}.pt-1{padding-top:var(--nt-space-1)!important}.pt-2{padding-top:var(--nt-space-2)!important}.pt-3{padding-top:var(--nt-space-3)!important}.pt-4{padding-top:var(--nt-space-4)!important}.pt-5{padding-top:var(--nt-space-5)!important}.pt-auto{padding-top:auto!important}.pe-0{padding-right:0!important}.pe-1{padding-right:var(--nt-space-1)!important}.pe-2{padding-right:var(--nt-space-2)!important}.pe-3{padding-right:var(--nt-space-3)!important}.pe-4{padding-right:var(--nt-space-4)!important}.pe-5{padding-right:var(--nt-space-5)!important}.pe-auto{padding-right:auto!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:var(--nt-space-1)!important}.pb-2{padding-bottom:var(--nt-space-2)!important}.pb-3{padding-bottom:var(--nt-space-3)!important}.pb-4{padding-bottom:var(--nt-space-4)!important}.pb-5{padding-bottom:var(--nt-space-5)!important}.pb-auto{padding-bottom:auto!important}.ps-0{padding-left:0!important}.ps-1{padding-left:var(--nt-space-1)!important}.ps-2{padding-left:var(--nt-space-2)!important}.ps-3{padding-left:var(--nt-space-3)!important}.ps-4{padding-left:var(--nt-space-4)!important}.ps-5{padding-left:var(--nt-space-5)!important}.ps-auto{padding-left:auto!important}.px-0{padding-inline:0!important}.px-1{padding-inline:var(--nt-space-1)!important}.px-2{padding-inline:var(--nt-space-2)!important}.px-3{padding-inline:var(--nt-space-3)!important}.px-4{padding-inline:var(--nt-space-4)!important}.px-5{padding-inline:var(--nt-space-5)!important}.px-auto{padding-inline:auto!important}.py-0{padding-block:0!important}.py-1{padding-block:var(--nt-space-1)!important}.py-2{padding-block:var(--nt-space-2)!important}.py-3{padding-block:var(--nt-space-3)!important}.py-4{padding-block:var(--nt-space-4)!important}.py-5{padding-block:var(--nt-space-5)!important}.py-auto{padding-block:auto!important}.bg-primary{background:var(--nt-primary)!important}.bg-primary-subtle{background:var(--nt-primary-subtle)!important}.bg-primary-emphasis{background:var(--nt-primary-emphasis)!important}.bg-secondary{background:var(--nt-secondary)!important}.bg-secondary-subtle{background:var(--nt-secondary-subtle)!important}.bg-secondary-emphasis{background:var(--nt-secondary-emphasis)!important}.bg-tertiary{background:var(--nt-tertiary)!important}.bg-tertiary-subtle{background:var(--nt-tertiary-subtle)!important}.bg-tertiary-emphasis{background:var(--nt-tertiary-emphasis)!important}.bg-accent{background:var(--nt-accent)!important}.bg-accent-subtle{background:var(--nt-accent-subtle)!important}.bg-accent-emphasis{background:var(--nt-accent-emphasis)!important}.bg-success{background:var(--nt-success)!important}.bg-success-subtle{background:var(--nt-success-subtle)!important}.bg-success-emphasis{background:var(--nt-success-emphasis)!important}.bg-info{background:var(--nt-info)!important}.bg-info-subtle{background:var(--nt-info-subtle)!important}.bg-info-emphasis{background:var(--nt-info-emphasis)!important}.bg-warning{background:var(--nt-warning)!important}.bg-warning-subtle{background:var(--nt-warning-subtle)!important}.bg-warning-emphasis{background:var(--nt-warning-emphasis)!important}.bg-danger{background:var(--nt-danger)!important}.bg-danger-subtle{background:var(--nt-danger-subtle)!important}.bg-danger-emphasis{background:var(--nt-danger-emphasis)!important}.bg-light{background:var(--nt-light)!important}.bg-light-subtle{background:var(--nt-light-subtle)!important}.bg-light-emphasis{background:var(--nt-light-emphasis)!important}.bg-dark{background:var(--nt-dark)!important}.bg-dark-subtle{background:var(--nt-dark-subtle)!important}.bg-dark-emphasis{background:var(--nt-dark-emphasis)!important}.bg-white{background:var(--nt-white)!important}.bg-black{background:var(--nt-black)!important}.bg-soft-primary{background:var(--nt-primary-subtle)!important}.bg-soft-accent{background:var(--nt-accent-subtle)!important}.bg-soft-secondary{background:var(--nt-secondary-subtle)!important}.bg-soft-tertiary{background:var(--nt-tertiary-subtle)!important}.bg-soft-success{background:var(--nt-success-subtle)!important}.bg-soft-info{background:var(--nt-info-subtle)!important}.bg-soft-warning{background:var(--nt-warning-subtle)!important}.bg-soft-danger{background:var(--nt-danger-subtle)!important}.bg-soft-light{background:var(--nt-light-subtle)!important}.bg-soft-dark{background:var(--nt-dark-subtle)!important}.text-primary{--text-color: var(--nt-primary) !important;color:var(--nt-primary)!important}.text-secondary{--text-color: var(--nt-secondary) !important;color:var(--nt-secondary)!important}.text-tertiary{--text-color: var(--nt-tertiary) !important;color:var(--nt-tertiary)!important}.text-accent{--text-color: var(--nt-accent) !important;color:var(--nt-accent)!important}.text-success{--text-color: var(--nt-success) !important;color:var(--nt-success)!important}.text-info{--text-color: var(--nt-info) !important;color:var(--nt-info)!important}.text-warning{--text-color: var(--nt-warning) !important;color:var(--nt-warning)!important}.text-danger{--text-color: var(--nt-danger) !important;color:var(--nt-danger)!important}.text-light{--text-color: var(--nt-light) !important;color:var(--nt-light)!important}.text-dark{--text-color: var(--nt-dark) !important;color:var(--nt-dark)!important}.text-white{--text-color: var(--nt-white) !important;color:var(--nt-white)!important}.text-black{--text-color: var(--nt-black) !important;color:var(--nt-black)!important}.border-color-primary{--border-color: var(--nt-primary) !important;border-color:var(--nt-primary)!important}.border-color-secondary{--border-color: var(--nt-secondary) !important;border-color:var(--nt-secondary)!important}.border-color-accent{--border-color: var(--nt-accent) !important;border-color:var(--nt-accent)!important}.border-color-success{--border-color: var(--nt-success) !important;border-color:var(--nt-success)!important}.border-color-info{--border-color: var(--nt-info) !important;border-color:var(--nt-info)!important}.border-color-warning{--border-color: var(--nt-warning) !important;border-color:var(--nt-warning)!important}.border-color-danger{--border-color: var(--nt-danger) !important;border-color:var(--nt-danger)!important}.border-color-light{--border-color: var(--nt-light) !important;border-color:var(--nt-light)!important}.border-color-dark{--border-color: var(--nt-dark) !important;border-color:var(--nt-dark)!important}.border-color-white{--border-color: var(--nt-white) !important;border-color:var(--nt-white)!important}.border-color-black{--border-color: var(--nt-black) !important;border-color:var(--nt-black)!important}.bg-gray-100{background:var(--nt-gray-100)!important}.bg-gray-200{background:var(--nt-gray-200)!important}.bg-gray-300{background:var(--nt-gray-300)!important}.bg-gray-400{background:var(--nt-gray-400)!important}.bg-gray-500{background:var(--nt-gray-500)!important}.bg-gray-600{background:var(--nt-gray-600)!important}.bg-gray-700{background:var(--nt-gray-700)!important}.bg-gray-800{background:var(--nt-gray-800)!important}.bg-gray-900{background:var(--nt-gray-900)!important}.text-gray-100{color:var(--nt-gray-100)!important}.text-gray-200{color:var(--nt-gray-200)!important}.text-gray-300{color:var(--nt-gray-300)!important}.text-gray-400{color:var(--nt-gray-400)!important}.text-gray-500{color:var(--nt-gray-500)!important}.text-gray-600{color:var(--nt-gray-600)!important}.text-gray-700{color:var(--nt-gray-700)!important}.text-gray-800{color:var(--nt-gray-800)!important}.text-gray-900{color:var(--nt-gray-900)!important}.fs-1{font-size:var(--nt-fs-1)!important;line-height:var(--nt-line-height)!important}.fs-2{font-size:var(--nt-fs-2)!important;line-height:var(--nt-line-height)!important}.fs-3{font-size:var(--nt-fs-3)!important;line-height:var(--nt-line-height)!important}.fs-4{font-size:var(--nt-fs-4)!important;line-height:var(--nt-line-height)!important}.fs-5{font-size:var(--nt-fs-5)!important;line-height:var(--nt-line-height)!important}.fs-6{font-size:var(--nt-fs-6)!important;line-height:var(--nt-line-height)!important}.text-reset{color:inherit!important;text-decoration:none!important}.fw-light{font-weight:300!important}.fw-lighter{font-weight:lighter!important}.fw-normal{font-weight:400!important}.fw-medium{font-weight:500!important}.fw-semibold{font-weight:600!important}.fw-bold{font-weight:700!important}.fw-bolder{font-weight:bolder!important}.fst-italic{font-style:italic!important}.fst-normal{font-style:normal!important}.lh-1{line-height:1!important}.lh-sm{line-height:1.25!important}.lh-base{line-height:1.5!important}.lh-lg{line-height:2!important}.font-monospace{font-family:var(--font-monospace-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New"),monospace!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-center{text-align:center!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-break{overflow-wrap:break-word!important;word-wrap:break-word!important}.text-truncate{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-decoration-none{text-decoration:none!important}.text-decoration-underline{text-decoration:underline!important}.text-decoration-line-through{text-decoration:line-through!important}.border{--border-width: var(--nt-border-width, 1px);--border-style: solid;--border-color: var(--nt-primary);border:var(--border-width) var(--border-style) var(--border-color)!important}.border-top{border-top:var(--nt-border-width) solid rgb(from var(--border-color, var(--nt-dark)) r g b/var(--border-opacity, 1))!important}.border-end{border-inline-end:var(--nt-border-width) solid rgb(from var(--border-color, var(--nt-dark)) r g b/var(--border-opacity, 1))!important}.border-bottom{border-bottom:var(--nt-border-width) solid rgb(from var(--border-color, var(--nt-dark)) r g b/var(--border-opacity, 1))!important}.border-start{border-inline-start:var(--nt-border-width) solid rgb(from var(--border-color, var(--nt-dark)) r g b/var(--border-opacity, 1))!important}.border-0{border:0!important}.border-top-0{border-top:0!important}.border-end-0{border-inline-end:0!important}.border-bottom-0{border-bottom:0!important}.border-start-0{border-inline-start:0!important}.border-1{border-width:1px!important}.border-2{border-width:2px!important}.border-3{border-width:3px!important}.border-4{border-width:4px!important}.border-5{border-width:5px!important}.border-primary{--border-color: rgb(from var(--nt-primary) r g b / var(--border-opacity, 1)) !important}.border-secondary{--border-color: rgb(from var(--nt-secondary) r g b / var(--border-opacity, 1)) !important}.border-accent{--border-color: rgb(from var(--nt-accent) r g b / var(--border-opacity, 1)) !important}.border-success{--border-color: rgb(from var(--nt-success) r g b / var(--border-opacity, 1)) !important}.border-info{--border-color: rgb(from var(--nt-info) r g b / var(--border-opacity, 1)) !important}.border-warning{--border-color: rgb(from var(--nt-warning) r g b / var(--border-opacity, 1)) !important}.border-danger{--border-color: rgb(from var(--nt-danger) r g b / var(--border-opacity, 1)) !important}.border-light{--border-color: rgb(from var(--nt-light) r g b / var(--border-opacity, 1)) !important}.border-dark{--border-color: rgb(from var(--nt-dark) r g b / var(--border-opacity, 1)) !important}.border-white{--border-color: rgb(from var(--nt-white) r g b / var(--border-opacity, 1)) !important}.border-black{--border-color: rgb(from var(--nt-black) r g b / var(--border-opacity, 1)) !important}.border-opacity-10{--border-opacity: .1}.border-opacity-25{--border-opacity: .25}.border-opacity-50{--border-opacity: .5}.border-opacity-75{--border-opacity: .75}.border-opacity-100{--border-opacity: 1}.rounded{border-radius:var(--nt-border-radius)!important}.rounded-0{border-radius:0!important}.rounded-1{border-radius:calc(var(--nt-border-radius) * .25)!important}.rounded-2{border-radius:calc(var(--nt-border-radius) * .5)!important}.rounded-3{border-radius:calc(var(--nt-border-radius) * 1)!important}.rounded-4{border-radius:calc(var(--nt-border-radius) * 1.5)!important}.rounded-5{border-radius:calc(var(--nt-border-radius) * 3)!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:50rem!important}.w-100{width:100%!important}.w-75{width:75%!important}.w-50{width:50%!important}.w-25{width:25%!important}.w-auto{width:auto!important}.h-100{height:100%!important}.h-75{height:75%!important}.h-50{height:50%!important}.h-25{height:25%!important}.h-auto{height:auto!important}.vw-100{width:100vw!important}.vh-100{height:100vh!important}.container{width:var(--nt-container-width);margin:0 auto}.container-fluid{width:100%;margin:0 auto}.row{--gutters-x: 0;--gutters-y: 0;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;margin-top:calc(-1 * var(--gutters-y))!important;margin-right:calc(-.5 * var(--gutters-x))!important;margin-left:calc(-.5 * var(--gutters-x))!important}.row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--gutters-x) * .5)!important;padding-left:calc(var(--gutters-x) * .5)!important;margin-top:var(--gutters-y)!important}.row-cols-1>*{flex:0 0 auto!important;width:100%!important}.row-cols-2>*{flex:0 0 auto!important;width:50%!important}.row-cols-3>*{flex:0 0 auto!important;width:33.3333333333%!important}.row-cols-4>*{flex:0 0 auto!important;width:25%!important}.row-cols-5>*{flex:0 0 auto!important;width:20%!important}.row-cols-6>*{flex:0 0 auto!important;width:16.6666666667%!important}.col-auto{flex:0 0 auto!important;width:auto!important}.col{flex:1 0 0!important;width:0!important}.col-1{flex:0 0 auto!important;width:8.3333333333%!important}.col-2{flex:0 0 auto!important;width:16.6666666667%!important}.col-3{flex:0 0 auto!important;width:25%!important}.col-4{flex:0 0 auto!important;width:33.3333333333%!important}.col-5{flex:0 0 auto!important;width:41.6666666667%!important}.col-6{flex:0 0 auto!important;width:50%!important}.col-7{flex:0 0 auto!important;width:58.3333333333%!important}.col-8{flex:0 0 auto!important;width:66.6666666667%!important}.col-9{flex:0 0 auto!important;width:75%!important}.col-10{flex:0 0 auto!important;width:83.3333333333%!important}.col-11{flex:0 0 auto!important;width:91.6666666667%!important}.col-12{flex:0 0 auto!important;width:100%!important}.offset-1{margin-left:8.3333333333%!important}.offset-2{margin-left:16.6666666667%!important}.offset-3{margin-left:25%!important}.offset-4{margin-left:33.3333333333%!important}.offset-5{margin-left:41.6666666667%!important}.offset-6{margin-left:50%!important}.offset-7{margin-left:58.3333333333%!important}.offset-8{margin-left:66.6666666667%!important}.offset-9{margin-left:75%!important}.offset-10{margin-left:83.3333333333%!important}.offset-11{margin-left:91.6666666667%!important}.offset-12{margin-left:100%!important}.g-0{--gutters-x: var(--nt-space-0) !important;--gutters-y: var(--nt-space-0) !important}.gx-0{--gutters-x: var(--nt-space-0) !important}.gy-0{--gutters-y: var(--nt-space-0) !important}.g-1{--gutters-x: var(--nt-space-1) !important;--gutters-y: var(--nt-space-1) !important}.gx-1{--gutters-x: var(--nt-space-1) !important}.gy-1{--gutters-y: var(--nt-space-1) !important}.g-2{--gutters-x: var(--nt-space-2) !important;--gutters-y: var(--nt-space-2) !important}.gx-2{--gutters-x: var(--nt-space-2) !important}.gy-2{--gutters-y: var(--nt-space-2) !important}.g-3{--gutters-x: var(--nt-space-3) !important;--gutters-y: var(--nt-space-3) !important}.gx-3{--gutters-x: var(--nt-space-3) !important}.gy-3{--gutters-y: var(--nt-space-3) !important}.g-4{--gutters-x: var(--nt-space-4) !important;--gutters-y: var(--nt-space-4) !important}.gx-4{--gutters-x: var(--nt-space-4) !important}.gy-4{--gutters-y: var(--nt-space-4) !important}.g-5{--gutters-x: var(--nt-space-5) !important;--gutters-y: var(--nt-space-5) !important}.gx-5{--gutters-x: var(--nt-space-5) !important}.gy-5{--gutters-y: var(--nt-space-5) !important}.g-6{--gutters-x: var(--nt-space-6) !important;--gutters-y: var(--nt-space-6) !important}.gx-6{--gutters-x: var(--nt-space-6) !important}.gy-6{--gutters-y: var(--nt-space-6) !important}html ul.list-unstyled{list-style:none!important;padding-left:0!important}html ul.list-inline{padding-left:0!important}html ul.list-inline>li{display:inline-block!important}html ul.list-inline>li:not(:last-child){margin-right:var(--nt-space-3)!important}html ul.list-checked{list-style:none!important;padding-left:0!important}html ul.list-checked>li{vertical-align:center;display:flex;align-items:center}html ul.list-checked>li:before{width:1.2em;height:1.2em;display:flex;justify-content:center;align-items:center;content:"✓";border-radius:50%;margin-right:var(--nt-space-2);background-color:var(--nt-success);color:var(--nt-white);text-align:center}html ul.list-checked>li.list-item-removed:before{content:"✕";background-color:var(--nt-danger)}html ul.list-checked>li.list-item-unavailable:before{content:"‒";background-color:var(--nt-dark)}.table{width:100%;caption-side:bottom;border-collapse:collapse}.table tbody,.table td,.table tfoot,.table th,.table thead,.table tr{border-color:inherit;border-style:solid;border-width:0}.table>:not(caption)>*>*{padding:var(--nt-space-2, .5rem) var(--nt-space-2, .5rem);background-color:transparent;border-bottom-width:var(--nt-border-width, 1px);border-bottom-style:solid;border-bottom-color:var(--nt-border, currentColor)}.table-bordered>:not(caption)>*>*{border-width:1px}.surface-primary{--nt-text: var(--nt-text-on-primary);--nt-text-muted: color-mix(in oklch, var(--nt-text-on-primary) 72%, var(--nt-primary));--nt-header: var(--nt-text-on-primary);--nt-link: var(--nt-text-on-primary);--nt-link-hover: var(--nt-text-on-primary);background:var(--nt-primary)!important;color:var(--nt-text)!important}.surface-secondary{--nt-text: var(--nt-text-on-secondary);--nt-text-muted: color-mix(in oklch, var(--nt-text-on-secondary) 72%, var(--nt-secondary));--nt-header: var(--nt-text-on-secondary);--nt-link: var(--nt-text-on-secondary);--nt-link-hover: var(--nt-text-on-secondary);background:var(--nt-secondary)!important;color:var(--nt-text)!important}.surface-tertiary{--nt-text: var(--nt-text-on-tertiary);--nt-text-muted: color-mix(in oklch, var(--nt-text-on-tertiary) 72%, var(--nt-tertiary));--nt-header: var(--nt-text-on-tertiary);--nt-link: var(--nt-text-on-tertiary);--nt-link-hover: var(--nt-text-on-tertiary);background:var(--nt-tertiary)!important;color:var(--nt-text)!important}.surface-accent{--nt-text: var(--nt-text-on-accent);--nt-text-muted: color-mix(in oklch, var(--nt-text-on-accent) 72%, var(--nt-accent));--nt-header: var(--nt-text-on-accent);--nt-link: var(--nt-text-on-accent);--nt-link-hover: var(--nt-text-on-accent);background:var(--nt-accent)!important;color:var(--nt-text)!important}.surface-success{--nt-text: var(--nt-text-on-success);--nt-text-muted: color-mix(in oklch, var(--nt-text-on-success) 72%, var(--nt-success));--nt-header: var(--nt-text-on-success);--nt-link: var(--nt-text-on-success);--nt-link-hover: var(--nt-text-on-success);background:var(--nt-success)!important;color:var(--nt-text)!important}.surface-info{--nt-text: var(--nt-text-on-info);--nt-text-muted: color-mix(in oklch, var(--nt-text-on-info) 72%, var(--nt-info));--nt-header: var(--nt-text-on-info);--nt-link: var(--nt-text-on-info);--nt-link-hover: var(--nt-text-on-info);background:var(--nt-info)!important;color:var(--nt-text)!important}.surface-warning{--nt-text: var(--nt-text-on-warning);--nt-text-muted: color-mix(in oklch, var(--nt-text-on-warning) 72%, var(--nt-warning));--nt-header: var(--nt-text-on-warning);--nt-link: var(--nt-text-on-warning);--nt-link-hover: var(--nt-text-on-warning);background:var(--nt-warning)!important;color:var(--nt-text)!important}.surface-danger{--nt-text: var(--nt-text-on-danger);--nt-text-muted: color-mix(in oklch, var(--nt-text-on-danger) 72%, var(--nt-danger));--nt-header: var(--nt-text-on-danger);--nt-link: var(--nt-text-on-danger);--nt-link-hover: var(--nt-text-on-danger);background:var(--nt-danger)!important;color:var(--nt-text)!important}.surface-light{--nt-text: var(--nt-text-on-light);--nt-text-muted: color-mix(in oklch, var(--nt-text-on-light) 72%, var(--nt-light));--nt-header: var(--nt-text-on-light);--nt-link: var(--nt-text-on-light);--nt-link-hover: var(--nt-text-on-light);background:var(--nt-light)!important;color:var(--nt-text)!important}.surface-dark{--nt-text: var(--nt-text-on-dark);--nt-text-muted: color-mix(in oklch, var(--nt-text-on-dark) 72%, var(--nt-dark));--nt-header: var(--nt-text-on-dark);--nt-link: var(--nt-text-on-dark);--nt-link-hover: var(--nt-text-on-dark);background:var(--nt-dark)!important;color:var(--nt-text)!important}.surface-white{--nt-text: var(--nt-text-on-white);--nt-text-muted: color-mix(in oklch, var(--nt-text-on-white) 72%, var(--nt-white));--nt-header: var(--nt-text-on-white);--nt-link: var(--nt-text-on-white);--nt-link-hover: var(--nt-text-on-white);background:var(--nt-white)!important;color:var(--nt-text)!important}.surface-black{--nt-text: var(--nt-text-on-black);--nt-text-muted: color-mix(in oklch, var(--nt-text-on-black) 72%, var(--nt-black));--nt-header: var(--nt-text-on-black);--nt-link: var(--nt-text-on-black);--nt-link-hover: var(--nt-text-on-black);background:var(--nt-black)!important;color:var(--nt-text)!important}.scheme-light{color-scheme:light!important}.scheme-dark{color-scheme:dark!important}.scheme-auto{color-scheme:light dark!important}

package/index.d.ts

@@ -1 +1 @@
-export * from '../index.scss';
+export * from './default.scss';

package/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nextrap Base Style System</title>
+    <link rel="stylesheet" href="../index.scss" />
+  </head>
+  <body>
+    <script id="scope" type="application/json">
+      {
+        "colors": ["primary", "accent", "secondary", "success", "info", "warning", "danger", "light"],
+        "colorVariants": ["-subtle", "-emphasis", ""]
+      }
+    </script>
+    <div class="container section">
+      <prolit-scope src="/public/ex-01-grid.html" style="display: contents"></prolit-scope>
+    </div>
+
+    <script src="/public/main.ts" type="module"></script>
+  </body>
+</html>

package/index.scss

@@ -0,0 +1,12 @@
+// @nextrap/style-utils — mixin-only Sass API. Using this entry point never
+// emits CSS. Besides the individual utility mixins it exposes the class
+// generator mixin for scoped theme output:
+//
+//   @use '@nextrap/style-utils' as u;
+//   .component { @include u.d-flex(); @include u.gap-3(); }
+//   .my-theme { @include u.style-utils(); }
+//
+// Use @nextrap/style-utils/default to emit all classes globally.
+
+@forward './src/mixins';
+@forward './src/style-utils' show style-utils;

package/main.ts

@@ -1,2 +1,5 @@
+import '@nextrap/style-base';
 import '@nextrap/style-reset';
+import '@trunkjs/prolit-elements';
+
 import '../index.scss';

package/package.json

@@ -1,10 +1,20 @@
 {
     "name": "@nextrap/style-utils",
-    "version": "1.0.10",
+    "version": "2.0.0",
     "main": "./index.js",
+    "repository": {
+        "directory": "nextrap-base/style-utils",
+        "type": "git",
+        "url": "https://github.com/nextrap/nextrap-monorepo"
+    },
+    "exports": {
+        ".": "./index.scss",
+        "./default": "./default.scss"
+    },
     "devDependencies": {
-        "@nextrap/style-base": "^1.1.11"
+        "@nextrap/style-base": "^2.0.0"
     },
     "type": "module",
-    "types": "./index.d.ts"
+    "types": "./index.d.ts",
+    "web-types": "./web-types.json"
 }