vrembem 4.0.0-next.43 → 4.0.0-next.45

package/README.md

@@ -3,78 +3,3 @@
 A complete collection of all Vrembem components into a single comprehensive package for convenience.
 
 [Documentation](https://vrembem.com/packages/vrembem)
-
-## Installation
-
-Via CDN
-
-```html
-<!-- Include styles -->
-<link rel="stylesheet" href="https://unpkg.com/vrembem/dist/index.css">
-
-<!-- Include scripts -->
-<script src="https://unpkg.com/vrembem"></script>
-
-<script>
-  // All Vrembem JS modules are loaded into the vrembem namespace
-  console.log(vrembem);
-</script>
-```
-
-Via NPM
-
-```sh
-npm install vrembem
-```
-
-## Styles
-
-To include all Vrembem components into your styles, just import the vrembem package in your Sass manifest file.
-
-```scss
-@use "vrembem";
-```
-
-All component variables, functions and mixins are forwarded under their respective namespace and can be customized:
-
-```scss
-@use "vrembem" with (
-  $button-padding: 1rem 2rem
-);
-```
-
-Customize core variables which all components inherit from. The example below will prefix all components with `vb-` to help namespace styles:
-
-```scss
-@use "vrembem" with (
-  $core-prefix-block: "vb-"
-);
-```
-
-## JavaScript
-
-Import and mount the components you'll need:
-
-```js
-// Import individual components
-import { Drawer } from 'vrembem';
-const drawers = new DrawerCollection();
-await drawers.mount();
-```
-
-## Markup
-
-Include the component's markup into your project. Use the [online documentation](https://vrembem.com) for more information, customization options, code examples and available modifiers.
-
-```html
-<div class="drawer__wrapper">
-  <aside data-drawer="[unique-id]" class="drawer">
-    <div class="drawer__item">
-      <button data-drawer-close>...</button>
-    </div>
-  </aside>
-  <div class="drawer__main">
-    <button data-drawer-toggle="[unique-id]">...</button>
-  </div>
-</div>
-```

package/base.scss

@@ -0,0 +1,2 @@
+@forward "@vrembem/core/base";
+@forward "@vrembem/content" as content-*;

package/{styles.scss → components.scss}

@@ -1,10 +1,9 @@
-@forward "@vrembem/core" as core-*;
-@forward "@vrembem/base" as base-*;
 @forward "@vrembem/flex" as flex-*;
 @forward "@vrembem/grid" as grid-*;
 @forward "@vrembem/button" as button-*;
 @forward "@vrembem/checkbox" as checkbox-*;
 @forward "@vrembem/input" as input-*;
+@forward "@vrembem/select" as select-*;
 @forward "@vrembem/radio" as radio-*;
 @forward "@vrembem/switch" as switch-*;
 @forward "@vrembem/card" as card-*;
@@ -17,4 +16,3 @@
 @forward "@vrembem/popover" as popover-*;
 @forward "@vrembem/section" as section-*;
 @forward "@vrembem/table" as table-*;
-@forward "@vrembem/utility" as utility-*;

package/dev/base.css

@@ -0,0 +1,259 @@
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  html,
+  :host {
+    font-family: var(--vb-font-family, system-ui, sans-serif);
+    line-height: var(--vb-line-height, 1.5);
+    text-size-adjust: none;
+  }
+  html {
+    height: 100%;
+  }
+  body {
+    min-height: 100vh;
+    color: var(--vb-base-foreground);
+    background: var(--vb-base-background);
+  }
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+  }
+  img,
+  video,
+  picture {
+    max-width: 100%;
+    height: auto;
+    vertical-align: middle;
+  }
+  button,
+  input,
+  textarea,
+  select {
+    font: inherit;
+    color: inherit;
+  }
+  button {
+    cursor: pointer;
+    border: 0;
+    background: none;
+  }
+  label:has(:disabled) {
+    pointer-events: none;
+  }
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    color: var(--vb-foreground-strong);
+  }
+  b,
+  strong {
+    font-weight: bold;
+  }
+  small {
+    font-size: var(--vb-font-size-sm, 0.875rem);
+  }
+  code,
+  pre {
+    font-family: var(--vb-font-family-mono, ui-monospace, monospace);
+    font-size: 1em;
+  }
+  table {
+    border-collapse: collapse;
+    border-color: inherit;
+  }
+}
+@layer base {
+  .content {
+    font-family: var(--vb-content-font-family, inherit);
+    font-size: var(--vb-content-font-size, inherit);
+    line-height: var(--vb-content-line-height, inherit);
+    color: var(--vb-content-foreground, var(--vb-foreground));
+  }
+  .content > * + * {
+    margin-top: var(--vb-content-spacing);
+  }
+  .h1, .content > h1, .h2, .content > h2, .h3, .content > h3, .h4, .content > h4, .h5, .content > h5 {
+    font-family: var(--vb-headings-font-family, inherit);
+    font-size: var(--vb-headings-font-size, 1em);
+    font-weight: var(--vb-headings-font-weight, var(--vb-font-weight-semi-bold));
+    line-height: var(--vb-headings-line-height, inherit);
+    color: var(--vb-headings-foreground, var(--vb-foreground-strong));
+  }
+  .h1, .content > h1 {
+    --vb-headings-font-size: 2.75rem;
+    --vb-headings-line-height: 1.25;
+  }
+  .h2, .content > h2 {
+    --vb-headings-font-size: 2rem;
+    --vb-headings-line-height: 1.25;
+  }
+  .h3, .content > h3 {
+    --vb-headings-font-size: 1.75rem;
+    --vb-headings-line-height: 1.25;
+  }
+  .h4, .content > h4 {
+    --vb-headings-font-size: 1.5rem;
+    --vb-headings-line-height: 1.375;
+  }
+  .h5, .content > h5 {
+    --vb-headings-font-size: 1.25rem;
+  }
+  .link, .content :not(div) > a {
+    color: var(--vb-link-foreground, var(--vb-foreground-accent));
+    text-decoration: var(--vb-link-decoration, underline);
+    text-decoration-thickness: var(--vb-link-decoration-thickness, 1px);
+    text-underline-offset: var(--vb-link-underline-offset, 2px);
+  }
+  .link code, .content :not(div) > a code {
+    color: var(--vb-link-foreground, var(--vb-foreground-accent));
+    background-color: var(--vb-background-alt);
+  }
+  .link:hover, .link:focus-visible, .content :not(div) > a:hover, .content :not(div) > a:focus-visible {
+    color: var(--vb-link-foreground-hover, light-dark(oklch(from var(--vb-foreground-accent) calc(l - 0.1) c h), oklch(from var(--vb-foreground-accent) calc(l + 0.1) c h)));
+    text-decoration: var(--vb-link-decoration-hover, none);
+  }
+  .link:hover code, .link:focus-visible code, .content :not(div) > a:hover code, .content :not(div) > a:focus-visible code {
+    color: var(--vb-link-foreground-hover, light-dark(oklch(from var(--vb-foreground-accent) calc(l - 0.1) c h), oklch(from var(--vb-foreground-accent) calc(l + 0.1) c h)));
+  }
+  .link:focus-visible, .content :not(div) > a:focus-visible {
+    outline: var(--vb-link-focus-ring, currentcolor dotted 1px);
+    outline-offset: var(--vb-link-focus-ring-offset, 0.125rem);
+  }
+  .list, .content > ul, .content > ol {
+    margin-left: var(--vb-list-indent, var(--vb-spacing-lg));
+  }
+  .list ul,
+  .list ol, .content > ul ul,
+  .content > ul ol, .content > ol ul,
+  .content > ol ol {
+    margin-left: var(--vb-list-indent, var(--vb-spacing-lg));
+  }
+  .list li li,
+  .list li + li, .content > ul li li,
+  .content > ul li + li, .content > ol li li,
+  .content > ol li + li {
+    margin-top: var(--vb-list-spacing, var(--vb-spacing-sm));
+  }
+  .list-style-none {
+    list-style: none !important;
+  }
+  .code, .content :not(pre) > code {
+    padding: var(--vb-code-padding, 0.125rem 0.375rem);
+    border: var(--vb-code-border);
+    border-radius: var(--vb-code-border-radius, var(--vb-border-radius));
+    font-family: var(--vb-font-family-mono);
+    font-size: var(--vb-code-font-size, var(--vb-font-size-sm));
+    color: var(--vb-code-foreground, var(--vb-foreground-accent-alt));
+    overflow-wrap: break-word;
+    background: var(--vb-code-background, var(--vb-background-alt));
+  }
+  .pre, .content > pre {
+    overflow: auto;
+    padding: var(--vb-pre-padding, var(--vb-spacing-md));
+    border: var(--vb-pre-border, none);
+    border-radius: var(--vb-pre-border-radius, var(--vb-border-radius));
+    font-family: var(--vb-font-family-mono);
+    color: var(--vb-pre-foreground, var(--vb-foreground-strong));
+    background: var(--vb-pre-background, var(--vb-background-alt));
+  }
+  .pre code, .content > pre code {
+    padding: 0;
+    border: none;
+    font-size: var(--vb-pre-font-size, var(--vb-font-size-sm));
+    color: inherit;
+    background: none;
+  }
+  .blockquote, .content > blockquote {
+    position: relative;
+    padding: var(--vb-blockquote-padding, var(--vb-spacing-md));
+    border: var(--vb-blockquote-border, var(--vb-border));
+    border-radius: var(--vb-blockquote-border-radius, var(--vb-border-radius));
+    color: var(--vb-blockquote-foreground, currentcolor);
+    background: var(--vb-blockquote-background, transparent);
+  }
+  .blockquote > * + *, .content > blockquote > * + * {
+    margin-top: var(--vb-blockquote-spacing, var(--vb-spacing-md));
+  }
+  .sep, .content > hr {
+    display: block;
+    height: 0;
+    border: none;
+    border-top: var(--vb-separator-border-width, var(--vb-border-width)) var(--vb-separator-border-style, var(--vb-border-style)) var(--vb-separator-border-color, var(--vb-border-color));
+  }
+  .arrow,
+  .arrow-up,
+  .arrow-down,
+  .arrow-left,
+  .arrow-right {
+    pointer-events: none;
+    transform-origin: center;
+    display: inline-block;
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 0;
+    height: 0;
+    border-color: var(--vb-arrow-color, currentcolor) transparent transparent;
+    border-style: solid;
+    border-width: var(--vb-arrow-size, 6px 4px);
+    border-bottom-width: 0;
+    border-radius: var(--vb-arrow-radius, 2px);
+  }
+  .arrow-up {
+    transform: rotate(180deg);
+  }
+  .arrow-left {
+    transform: rotate(90deg);
+  }
+  .arrow-right {
+    transform: rotate(-90deg);
+  }
+  .loading-spinner {
+    width: var(--vb-loading-size, 1em);
+    height: var(--vb-loading-size, 1em);
+    position: relative;
+    display: inline-block;
+    border: var(--vb-loading-border, 2px solid);
+    border-color: var(--vb-loading-color, currentcolor) var(--vb-loading-color, currentcolor) transparent transparent;
+    border-radius: var(--vb-border-radius-circle);
+    animation: spin var(--vb-loading-duration, 0.6s) infinite linear;
+  }
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  .sr-only {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    clip-path: inset(50%);
+  }
+}
+
+/*# sourceMappingURL=base.css.map */

package/dev/base.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../node_modules/@vrembem/core/base.scss","../../../node_modules/@vrembem/core/src/scss/library/_base.scss","../../../node_modules/@vrembem/content/index.scss","../../../node_modules/@vrembem/content/src/modules/_content.scss","../../../node_modules/@vrembem/content/src/modules/_headings.scss","../../../node_modules/@vrembem/core/src/scss/modules/_tokens.scss","../../../node_modules/@vrembem/content/src/modules/_link.scss","../../../node_modules/@vrembem/content/src/modules/_list.scss","../../../node_modules/@vrembem/content/src/modules/_code.scss","../../../node_modules/@vrembem/content/src/modules/_pre.scss","../../../node_modules/@vrembem/content/src/modules/_blockquote.scss","../../../node_modules/@vrembem/content/src/modules/_separator.scss","../../../node_modules/@vrembem/content/src/modules/_arrow.scss","../../../node_modules/@vrembem/core/src/scss/library/_arrow.scss","../../../node_modules/@vrembem/content/src/modules/_loading-spinner.scss","../../../node_modules/@vrembem/core/src/scss/library/_size.scss","../../../node_modules/@vrembem/core/src/scss/library/_loading-spinner.scss","../../../node_modules/@vrembem/content/src/modules/_sr-only.scss","../../../node_modules/@vrembem/core/src/scss/library/_sr-only.scss"],"names":[],"mappings":"AAEA;ECWE;AAAA;AAAA;IAGE;IACA;IACA;;EAQF;AAAA;IAEE;IACA;IACA;;EAIF;IACE;;EAKF;IACE;IACA;IACA;;EAKF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAQE;;EAIF;AAAA;AAAA;IAGE;IACA;IACA;;EAIF;AAAA;AAAA;AAAA;IAIE;IACA;;EAIF;IACE;IACA;IACA;;EAIF;IACE;;EAIF;IACE;IACA;;EAIF;AAAA;AAAA;AAAA;AAAA;AAAA;IAME;IACA;;EAIF;AAAA;IAEE;;EAIF;IACE;;EAIF;AAAA;IAEE;IACA;;EAKF;IACE;IACA;;;AC5HJ;ECGE;IACE;IACA;IACA;IACA;;EAEA;IACE;;ECLJ;IACE;IACA;IACA;IACA;IACA;;EAYA;ICiSE;IAAA;;EDjSF;ICiSE;IAAA;;EDjSF;ICiSE;IAAA;;EDjSF;ICiSE;IAAA;;EDjSF;ICiSE;;ECrTJ;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;;EAIF;IAEE;IAIA;;EAEA;IACE;;EAOJ;IACE;IACA;;EC9BJ;IACE;;EAEA;AAAA;AAAA;AAAA;IAEE;;EAGF;AAAA;AAAA;AAAA;IAEE;;EAIJ;IACE;;ECfF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;ECRF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;;ECdJ;IACE;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;ECTJ;IACE;IACA;IACA;IACA;;ECNF;AAAA;AAAA;AAAA;AAAA;ICMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EDTA;IACE;;EAGF;IACE;;EAGF;IACE;;EEjBF;ICUE,OCCY;IDAZ;ICOF,UFjBgC;IEkBhC;IACA;IACA;IACA;IACA;;EAME;IACE;MACE;;IAGF;MACE;;;ECnCN;ICFA;IACA;IACA;IACA;IACA;IACA;IACA","file":"base.css"}