@vonage/vivid 3.0.0-next.129 → 3.0.0-next.130

package/shared/definition21.js

@@ -1,44 +1,78 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, h as html, r as registerFactory } from './index.js';
+import { O as Orientation } from './aria.js';
 import { c as classNames } from './class-names.js';
 
-var AUTO_SIZING;
-(function (AUTO_SIZING) {
-  AUTO_SIZING["Fit"] = "fit";
-  AUTO_SIZING["Fill"] = "fill";
-})(AUTO_SIZING || (AUTO_SIZING = {}));
-class Layout extends FoundationElement {}
-__decorate([attr, __metadata("design:type", String)], Layout.prototype, "gutters", void 0);
-__decorate([attr({
-  attribute: 'column-basis'
-}), __metadata("design:type", String)], Layout.prototype, "columnBasis", void 0);
-__decorate([attr({
-  attribute: 'column-spacing'
-}), __metadata("design:type", String)], Layout.prototype, "columnSpacing", void 0);
-__decorate([attr({
-  attribute: 'auto-sizing'
-}), __metadata("design:type", String)], Layout.prototype, "autoSizing", void 0);
+/**
+ * Divider roles
+ * @public
+ */
+const DividerRole = {
+    /**
+     * The divider semantically separates content
+     */
+    separator: "separator",
+    /**
+     * The divider has no semantic value and is for visual presentation only.
+     */
+    presentation: "presentation",
+};
 
-var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: min-content;\n}\n.control.column-basis-small {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)));\n}\n.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block), .control.column-basis-medium {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)));\n}\n.control.column-basis-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)));\n}\n.control.column-basis-block {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-small {\n  gap: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.column-spacing-small-inline {\n  gap: 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.column-spacing-small-block {\n  gap: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0;\n}\n.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block), .control.column-spacing-medium {\n  gap: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.column-spacing-medium-inline {\n  gap: 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.column-spacing-medium-block {\n  gap: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0;\n}\n.control.column-spacing-large {\n  gap: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.column-spacing-large-inline {\n  gap: 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.column-spacing-large-block {\n  gap: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0;\n}\n.control.gutters-small {\n  margin: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.gutters-small-inline {\n  margin: 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.gutters-small-block {\n  margin: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0;\n}\n.control.gutters-medium {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.gutters-medium-inline {\n  margin: 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.gutters-medium-block {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0;\n}\n.control.gutters-large {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.gutters-large-inline {\n  margin: 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.gutters-large-block {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0;\n}\n.control.auto-sizing-fill {\n  --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n  --_auto-sizing: auto-fit;\n}";
+/**
+ * A Divider Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
+ *
+ * @public
+ */
+class Divider$1 extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The role of the element.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: role
+         */
+        this.role = DividerRole.separator;
+        /**
+         * The orientation of the divider.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: orientation
+         */
+        this.orientation = Orientation.horizontal;
+    }
+}
+__decorate([
+    attr
+], Divider$1.prototype, "role", void 0);
+__decorate([
+    attr
+], Divider$1.prototype, "orientation", void 0);
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 05 Jan 2023 11:33:10 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
+
+class Divider extends Divider$1 {}
 
 let _ = t => t,
   _t;
 const getClasses = ({
-  columnBasis,
-  gutters,
-  columnSpacing,
-  autoSizing
-}) => classNames('control', [`column-basis-${columnBasis}`, Boolean(columnBasis)], [`gutters-${gutters}`, Boolean(gutters)], [`column-spacing-${columnSpacing}`, Boolean(columnSpacing)], [`auto-sizing-${autoSizing}`, Boolean(autoSizing)]);
-const layoutTemplate = () => html(_t || (_t = _`
-        <div class="${0}">
-			<slot></slot>
-		</div>`), getClasses);
+  orientation
+}) => classNames('base', [`${orientation}`, Boolean(orientation)]);
+const DividerTemplate = () => html(_t || (_t = _` 
+  <span
+  class="${0}"
+  	orientation="${0}"
+  	role="${0}"
+  ></span>`), getClasses, x => x.orientation, x => x.role);
 
-const layoutDefinition = Layout.compose({
-  baseName: 'layout',
-  template: layoutTemplate,
+const dividerDefinition = Divider.compose({
+  baseName: 'divider',
+  template: DividerTemplate,
   styles: css_248z
 });
-const layoutRegistries = [layoutDefinition()];
-const registerLayout = registerFactory(layoutRegistries);
+const dividerRegistries = [dividerDefinition()];
+const registerDivider = registerFactory(dividerRegistries);
 
-export { layoutRegistries as a, layoutDefinition as l, registerLayout as r };
+export { Divider as D, dividerDefinition as a, dividerRegistries as d, registerDivider as r };