@telesign/boreal-web-components 0.1.0-alpha.2 → 0.1.0-alpha.3

package/dist/collection/components/forms/bds-text-field/types/ITextField.js

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

package/dist/collection/components/forms/bds-text-field/types/enum.js

@@ -0,0 +1,14 @@
+export const TEXT_FIELD_TYPES = {
+    TEXT: 'text',
+    PASSWORD: 'password',
+};
+export const TEXT_FIELD_VARIANTS = {
+    OUTLINE: 'outline',
+    PLAIN: 'plain',
+};
+export const TEXT_FIELD_VALIDATION_TIMING = {
+    BLUR: 'blur',
+    CHANGE: 'change',
+    INPUT: 'input',
+    SUBMIT: 'submit',
+};

package/dist/collection/components/forms/bds-text-field/types/index.js

@@ -0,0 +1,3 @@
+export * from './enum';
+export * from './ITextField';
+export * from './types';

package/dist/collection/components/forms/bds-text-field/types/types.js

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

package/dist/collection/components/overlays/bds-dialog/bds-dialog.css

@@ -0,0 +1,105 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+.bds-dialog {
+  font-family: var(--boreal-typography-font-family-primary);
+  display: flex;
+  flex-direction: column;
+}
+.bds-dialog__header {
+  height: var(--boreal-spacing-4xl);
+  display: flex;
+  justify-content: space-between;
+  padding: var(--boreal-spacing-s) var(--boreal-spacing-s) var(--boreal-spacing-s) var(--boreal-spacing-l);
+}
+.bds-dialog__header:empty {
+  display: none;
+}
+.bds-dialog__header-right, .bds-dialog__header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--boreal-spacing-2xs);
+}
+.bds-dialog__title {
+  color: var(--boreal-text-default-light);
+  font-size: var(--boreal-typography-font-size-md);
+  font-weight: var(--boreal-typography-font-weight-semibold);
+  line-height: var(--boreal-typography-line-height-md);
+}
+.bds-dialog__body {
+  height: 100%;
+  overflow-y: auto;
+  padding: var(--boreal-spacing-s) var(--boreal-spacing-l);
+}
+.bds-dialog__footer {
+  padding: var(--boreal-spacing-s) var(--boreal-spacing-xs);
+}
+.bds-dialog__body, .bds-dialog__footer {
+  box-shadow: 0 var(--boreal-spacing-4xs) var(--boreal-spacing-4xs) 0 var(--boreal-stroke-default-light) inset;
+}
+.bds-dialog__body:empty, .bds-dialog__footer:empty {
+  display: none;
+}
+.bds-dialog--sm {
+  width: min(448px, 100vw - var(--boreal-spacing-m) * 2);
+}
+.bds-dialog--md {
+  width: min(640px, 100vw - var(--boreal-spacing-m) * 2);
+}
+.bds-dialog--lg {
+  width: min(960px, 100vw - var(--boreal-spacing-m) * 2);
+}
+.bds-dialog--full {
+  width: min(1280px, 100vw - var(--boreal-spacing-m) * 2);
+  height: calc(100vh - var(--boreal-spacing-4xl));
+}
+.bds-dialog--custom-size {
+  width: var(--bds-dialog-width, auto);
+  height: var(--bds-dialog-height, auto);
+}
+.bds-dialog--info .bds-dialog__variant-icon {
+  color: var(--boreal-icon-info-base);
+}
+.bds-dialog--warning .bds-dialog__variant-icon {
+  color: var(--boreal-icon-warning-base);
+}
+.bds-dialog--danger .bds-dialog__variant-icon {
+  color: var(--boreal-icon-danger-base);
+}
+.bds-dialog--success .bds-dialog__variant-icon {
+  color: var(--boreal-icon-success-base);
+}
+.bds-dialog--no-padding {
+  padding: 0;
+}
+
+bds-dialog dialog {
+  border: none;
+  border-radius: var(--boreal-radius-xs);
+  background-color: var(--boreal-white);
+  box-shadow: 0 8px 12px 0 rgba(19, 19, 22, 0.15);
+  align-self: center;
+  justify-self: center;
+}
+bds-dialog dialog,
+bds-dialog dialog::backdrop {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+bds-dialog dialog[open].enter,
+bds-dialog dialog[open].enter::backdrop {
+  opacity: 1;
+}