vira 28.2.1 → 28.4.0

package/dist/elements/index.d.ts

@@ -8,9 +8,11 @@ export * from './pop-up/vira-pop-up-menu.element.js';
 export * from './pop-up/vira-pop-up-trigger.element.js';
 export * from './vira-bold-text.element.js';
 export * from './vira-button.element.js';
+export * from './vira-card.element.js';
 export * from './vira-checkbox.element.js';
 export * from './vira-collapsible-wrapper.element.js';
 export * from './vira-dropdown.element.js';
+export * from './vira-error.element.js';
 export * from './vira-icon.element.js';
 export * from './vira-image.element.js';
 export * from './vira-input.element.js';

package/dist/elements/index.js

@@ -8,9 +8,11 @@ export * from './pop-up/vira-pop-up-menu.element.js';
 export * from './pop-up/vira-pop-up-trigger.element.js';
 export * from './vira-bold-text.element.js';
 export * from './vira-button.element.js';
+export * from './vira-card.element.js';
 export * from './vira-checkbox.element.js';
 export * from './vira-collapsible-wrapper.element.js';
 export * from './vira-dropdown.element.js';
+export * from './vira-error.element.js';
 export * from './vira-icon.element.js';
 export * from './vira-image.element.js';
 export * from './vira-input.element.js';

package/dist/elements/vira-card.element.d.ts

@@ -0,0 +1,18 @@
+/**
+ * State options for {@link ViraCard}.
+ *
+ * @category Internal
+ */
+export declare enum ViraCardState {
+    Error = "error",
+    Success = "success"
+}
+/**
+ * A simple wrapper "card" element that is just a `<slot>` with some styles.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-card
+ */
+export declare const ViraCard: import("element-vir").DeclarativeElementDefinition<"vira-card", {
+    cardState?: ViraCardState | undefined;
+}, {}, {}, "vira-card-error" | "vira-card-success", "vira-card-border" | "vira-card-border-radius" | "vira-card-error-color" | "vira-card-success-color" | "vira-card-padding", readonly [], readonly []>;

package/dist/elements/vira-card.element.js

@@ -0,0 +1,52 @@
+import { css, html } from 'element-vir';
+import { defineViraElement } from './define-vira-element.js';
+/**
+ * State options for {@link ViraCard}.
+ *
+ * @category Internal
+ */
+export var ViraCardState;
+(function (ViraCardState) {
+    ViraCardState["Error"] = "error";
+    ViraCardState["Success"] = "success";
+})(ViraCardState || (ViraCardState = {}));
+/**
+ * A simple wrapper "card" element that is just a `<slot>` with some styles.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-card
+ */
+export const ViraCard = defineViraElement()({
+    tagName: 'vira-card',
+    hostClasses: {
+        'vira-card-error': ({ inputs }) => inputs.cardState === ViraCardState.Error,
+        'vira-card-success': ({ inputs }) => inputs.cardState === ViraCardState.Success,
+    },
+    cssVars: {
+        'vira-card-border': '1px solid #d3d3d3',
+        'vira-card-border-radius': '16px',
+        'vira-card-error-color': 'red',
+        'vira-card-success-color': 'green',
+        'vira-card-padding': '16px',
+    },
+    styles: ({ hostClasses, cssVars }) => css `
+        :host {
+            display: block;
+            border: ${cssVars['vira-card-border'].value};
+            border-radius: ${cssVars['vira-card-border-radius'].value};
+            padding: ${cssVars['vira-card-padding'].value};
+        }
+
+        ${hostClasses['vira-card-error'].selector} {
+            border-color: ${cssVars['vira-card-error-color'].value};
+        }
+        ${hostClasses['vira-card-success'].selector} {
+            border-color: ${cssVars['vira-card-success-color'].value};
+        }
+    `,
+    render() {
+        return html `
+            <slot></slot>
+        `;
+    },
+});

package/dist/elements/vira-error.element.d.ts

@@ -0,0 +1,7 @@
+/**
+ * An error wrapper that applies error coloring (red, by default).
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-error
+ */
+export declare const ViraError: import("element-vir").DeclarativeElementDefinition<"vira-error", {}, {}, {}, "vira-error-", "vira-error-color" | "vira-error-font-weight", readonly [], readonly []>;

package/dist/elements/vira-error.element.js

@@ -0,0 +1,26 @@
+import { css, html } from 'element-vir';
+import { defineViraElement } from './define-vira-element.js';
+/**
+ * An error wrapper that applies error coloring (red, by default).
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-error
+ */
+export const ViraError = defineViraElement()({
+    tagName: 'vira-error',
+    cssVars: {
+        'vira-error-color': 'red',
+        'vira-error-font-weight': 'bold',
+    },
+    styles: ({ cssVars }) => css `
+        :host {
+            color: ${cssVars['vira-error-color'].value};
+            font-weight: ${cssVars['vira-error-font-weight'].value};
+        }
+    `,
+    render() {
+        return html `
+            <slot></slot>
+        `;
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "28.2.1",
+    "version": "28.4.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",