@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-select/diwa-select-styles.js

@@ -0,0 +1,265 @@
+import { getFocusStyle, getReducedMotionStyle } from "../../utils/styles";
+export const getComponentCss = (isOpen, _disabled, _state, _compact, isUp = false) => `
+  /* ── Host ──────────────────────────────────────────────────────────── */
+
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    min-width: 0;
+    font-family: var(--diwa-font-family-base);
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Label ──────────────────────────────────────────────────────────── */
+
+  .label {
+    display: block;
+    margin-bottom: var(--diwa-space-1);
+    font-size: var(--diwa-font-size-sm);
+    font-weight: var(--diwa-font-weight-semibold);
+    color: var(--diwa-text-secondary);
+    line-height: var(--diwa-line-height-normal);
+    cursor: default;
+  }
+
+  :host([hide-label]) .label {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  .label__required {
+    color: var(--diwa-notification-error);
+    font-weight: var(--diwa-font-weight-semibold);
+    margin-left: var(--diwa-space-1);
+  }
+
+  /* ── Description ────────────────────────────────────────────────────── */
+
+  .description {
+    display: block;
+    margin-bottom: var(--diwa-space-2);
+    font-size: var(--diwa-font-size-sm);
+    color: var(--diwa-text-secondary);
+    line-height: var(--diwa-line-height-normal);
+  }
+
+  /* ── Trigger ────────────────────────────────────────────────────────── */
+
+  .trigger {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: var(--diwa-input-height, var(--diwa-touch-target-min-size, 44px));
+    padding: 0 var(--diwa-space-3);
+    box-sizing: border-box;
+    gap: var(--diwa-space-2);
+
+    background: var(--diwa-input-bg, var(--diwa-bg-input));
+    border: var(--diwa-border-width-thin) solid var(--diwa-input-border);
+    border-radius: var(--diwa-input-radius, var(--diwa-radius-md));
+
+    font-size: var(--diwa-font-size-base);
+    font-weight: var(--diwa-font-weight-normal);
+    font-family: inherit;
+    color: var(--diwa-text-primary);
+    text-align: left;
+    line-height: 1;
+
+    cursor: pointer;
+    user-select: none;
+    -webkit-font-smoothing: antialiased;
+
+    transition: border-color var(--diwa-transition-fast), background var(--diwa-transition-fast);
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    :host(:not([disabled])) .trigger:hover {
+      border-color: var(--diwa-border-hover);
+    }
+  }
+
+  ${isOpen && !isUp ? '.trigger { border-color: var(--diwa-border-focus); border-radius: var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)) 0 0; }' : ''}
+  ${isOpen && isUp ? '.trigger { border-color: var(--diwa-border-focus); border-radius: 0 0 var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)); }' : ''}
+
+  /* ── Focus ring on trigger itself ───────────────────────────────────── */
+
+  ${getFocusStyle('.trigger')}
+
+  /* ── Selected text ──────────────────────────────────────────────────── */
+
+  .trigger__value {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .trigger__placeholder {
+    color: var(--diwa-text-secondary);
+  }
+
+  /* ── Chevron icon ───────────────────────────────────────────────────── */
+
+  .trigger__chevron {
+    flex-shrink: 0;
+    width: var(--diwa-icon-size-md);
+    height: var(--diwa-icon-size-md);
+    color: var(--diwa-text-secondary);
+    transition: transform var(--diwa-transition-fast);
+    ${isOpen ? 'transform: rotate(180deg);' : ''}
+  }
+
+  .trigger__chevron svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* ── Dropdown panel ─────────────────────────────────────────────────── */
+
+  .dropdown {
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: var(--diwa-z-dropdown);
+    background-color: var(--diwa-bg-elevated);
+    border: var(--diwa-border-width-thin) solid var(--diwa-border-focus);
+    border-top: none;
+    border-radius: 0 0 var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md));
+    overflow: hidden;
+    box-shadow: var(--diwa-shadow-lg);
+    display: ${isOpen ? 'block' : 'none'};
+  }
+
+  .dropdown--up {
+    top: auto;
+    bottom: 100%;
+    border-top: var(--diwa-border-width-thin) solid var(--diwa-border-focus);
+    border-bottom: none;
+    border-radius: var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)) 0 0;
+    margin-bottom: -1px;
+  }
+
+  /* ── Filter input ───────────────────────────────────────────────────── */
+
+  .filter {
+    padding: var(--diwa-space-2) var(--diwa-space-2) var(--diwa-space-1);
+    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-input-border);
+  }
+
+  .filter__input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--diwa-space-2) var(--diwa-space-3);
+    background: var(--diwa-input-bg, var(--diwa-bg-input));
+    border: var(--diwa-border-width-thin) solid var(--diwa-input-border);
+    border-radius: var(--diwa-radius-sm);
+    color: var(--diwa-text-primary);
+    font-size: var(--diwa-font-size-sm);
+    font-family: inherit;
+    outline: none;
+    transition: border-color var(--diwa-transition-fast);
+  }
+
+  .filter__input::placeholder {
+    color: var(--diwa-text-secondary);
+  }
+
+  .filter__input:focus-visible {
+    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);
+    outline-offset: var(--diwa-focus-ring-offset);
+  }
+
+  .filter__input:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  /* ── Options list ───────────────────────────────────────────────────── */
+
+  .options {
+    max-height: var(--diwa-select-dropdown-max-height);
+    overflow-y: auto;
+    padding: var(--diwa-space-1);
+  }
+
+  .options::-webkit-scrollbar {
+    width: var(--diwa-scrollbar-width);
+  }
+
+  .options::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .options::-webkit-scrollbar-thumb {
+    background-color: var(--diwa-border);
+    border-radius: var(--diwa-radius-sm);
+  }
+
+  /* ── Compact ────────────────────────────────────────────────────────── */
+
+  :host([compact]) .trigger {
+    min-height: var(--diwa-touch-target-min-size-compact, 32px);
+    font-size: var(--diwa-font-size-md);
+    padding: 0 var(--diwa-space-2);
+  }
+
+  /* ── States: error / success ────────────────────────────────────────── */
+
+  :host([state="error"]) .trigger {
+    border-color: var(--diwa-notification-error);
+  }
+
+  :host([state="success"]) .trigger {
+    border-color: var(--diwa-notification-success);
+  }
+
+  /* ── Message ────────────────────────────────────────────────────────── */
+
+  .message {
+    display: block;
+    margin-top: var(--diwa-space-1);
+    font-size: var(--diwa-font-size-sm);
+    line-height: var(--diwa-line-height-normal);
+    color: var(--diwa-text-secondary);
+  }
+
+  :host([state="error"]) .message {
+    color: var(--diwa-notification-error);
+  }
+
+  :host([state="success"]) .message {
+    color: var(--diwa-notification-success);
+  }
+
+  /* ── Disabled ───────────────────────────────────────────────────────── */
+
+  :host([disabled]) .trigger {
+    opacity: var(--diwa-opacity-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  :host([disabled]) .label {
+    opacity: var(--diwa-opacity-disabled);
+  }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────── */
+
+  ${getReducedMotionStyle('.trigger', '.trigger__chevron', '.filter__input')}
+`;
+//# sourceMappingURL=diwa-select-styles.js.map

package/dist/collection/components/diwa-select/diwa-select-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-select-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-select/diwa-select-styles.ts"],"names":[],"mappings":"AAAC,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAG3E,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,MAAe,EACf,SAAkB,EAClB,MAAmB,EACnB,QAAiB,EACjB,OAAgB,KAAK,EACb,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6FT,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,0KAA0K,CAAC,CAAC,CAAC,EAAE;IACjM,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,0KAA0K,CAAC,CAAC,CAAC,EAAE;;;;IAIhM,aAAa,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;MAwBvB,MAAM,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;eAsBjC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqHpC,qBAAqB,CAAC,UAAU,EAAE,mBAAmB,EAAE,gBAAgB,CAAC;CAC3E,CAAC","sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\nimport type { SelectState } from './types';\r\n\r\nexport const getComponentCss = (\r\n  isOpen: boolean,\r\n  _disabled: boolean,\r\n  _state: SelectState,\r\n  _compact: boolean,\r\n  isUp: boolean = false,\r\n): string => `\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    position: relative;\r\n    width: 100%;\r\n    min-width: 0;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Label ──────────────────────────────────────────────────────────── */\r\n\r\n  .label {\r\n    display: block;\r\n    margin-bottom: var(--diwa-space-1);\r\n    font-size: var(--diwa-font-size-sm);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    color: var(--diwa-text-secondary);\r\n    line-height: var(--diwa-line-height-normal);\r\n    cursor: default;\r\n  }\r\n\r\n  :host([hide-label]) .label {\r\n    border: 0;\r\n    clip: rect(0, 0, 0, 0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    white-space: nowrap;\r\n    width: 1px;\r\n  }\r\n\r\n  .label__required {\r\n    color: var(--diwa-notification-error);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    margin-left: var(--diwa-space-1);\r\n  }\r\n\r\n  /* ── Description ────────────────────────────────────────────────────── */\r\n\r\n  .description {\r\n    display: block;\r\n    margin-bottom: var(--diwa-space-2);\r\n    font-size: var(--diwa-font-size-sm);\r\n    color: var(--diwa-text-secondary);\r\n    line-height: var(--diwa-line-height-normal);\r\n  }\r\n\r\n  /* ── Trigger ────────────────────────────────────────────────────────── */\r\n\r\n  .trigger {\n    display: flex;\r\n    align-items: center;\r\n    width: 100%;\r\n    min-height: var(--diwa-input-height, var(--diwa-touch-target-min-size, 44px));\n    padding: 0 var(--diwa-space-3);\r\n    box-sizing: border-box;\r\n    gap: var(--diwa-space-2);\r\n\r\n    background: var(--diwa-input-bg, var(--diwa-bg-input));\r\n    border: var(--diwa-border-width-thin) solid var(--diwa-input-border);\r\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md));\r\n\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-normal);\r\n    font-family: inherit;\r\n    color: var(--diwa-text-primary);\r\n    text-align: left;\r\n    line-height: 1;\r\n\r\n    cursor: pointer;\r\n    user-select: none;\r\n    -webkit-font-smoothing: antialiased;\r\n\r\n    transition: border-color var(--diwa-transition-fast), background var(--diwa-transition-fast);\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n  }\r\n\r\n  @media (hover: hover) and (pointer: fine) {\n    :host(:not([disabled])) .trigger:hover {\n      border-color: var(--diwa-border-hover);\n    }\n  }\n\r\n  ${isOpen && !isUp ? '.trigger { border-color: var(--diwa-border-focus); border-radius: var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)) 0 0; }' : ''}\r\n  ${isOpen && isUp ? '.trigger { border-color: var(--diwa-border-focus); border-radius: 0 0 var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)); }' : ''}\r\n\r\n  /* ── Focus ring on trigger itself ───────────────────────────────────── */\r\n\r\n  ${getFocusStyle('.trigger')}\r\n\r\n  /* ── Selected text ──────────────────────────────────────────────────── */\r\n\r\n  .trigger__value {\r\n    flex: 1;\r\n    min-width: 0;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .trigger__placeholder {\r\n    color: var(--diwa-text-secondary);\r\n  }\r\n\r\n  /* ── Chevron icon ───────────────────────────────────────────────────── */\r\n\r\n  .trigger__chevron {\r\n    flex-shrink: 0;\r\n    width: var(--diwa-icon-size-md);\r\n    height: var(--diwa-icon-size-md);\r\n    color: var(--diwa-text-secondary);\r\n    transition: transform var(--diwa-transition-fast);\r\n    ${isOpen ? 'transform: rotate(180deg);' : ''}\r\n  }\r\n\r\n  .trigger__chevron svg {\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n\r\n  /* ── Dropdown panel ─────────────────────────────────────────────────── */\r\n\r\n  .dropdown {\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    z-index: var(--diwa-z-dropdown);\r\n    background-color: var(--diwa-bg-elevated);\r\n    border: var(--diwa-border-width-thin) solid var(--diwa-border-focus);\r\n    border-top: none;\r\n    border-radius: 0 0 var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md));\r\n    overflow: hidden;\r\n    box-shadow: var(--diwa-shadow-lg);\r\n    display: ${isOpen ? 'block' : 'none'};\r\n  }\r\n\r\n  .dropdown--up {\r\n    top: auto;\r\n    bottom: 100%;\r\n    border-top: var(--diwa-border-width-thin) solid var(--diwa-border-focus);\r\n    border-bottom: none;\r\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)) 0 0;\r\n    margin-bottom: -1px;\r\n  }\r\n\r\n  /* ── Filter input ───────────────────────────────────────────────────── */\r\n\r\n  .filter {\r\n    padding: var(--diwa-space-2) var(--diwa-space-2) var(--diwa-space-1);\r\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-input-border);\r\n  }\r\n\r\n  .filter__input {\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n    padding: var(--diwa-space-2) var(--diwa-space-3);\r\n    background: var(--diwa-input-bg, var(--diwa-bg-input));\r\n    border: var(--diwa-border-width-thin) solid var(--diwa-input-border);\r\n    border-radius: var(--diwa-radius-sm);\r\n    color: var(--diwa-text-primary);\r\n    font-size: var(--diwa-font-size-sm);\r\n    font-family: inherit;\r\n    outline: none;\r\n    transition: border-color var(--diwa-transition-fast);\r\n  }\r\n\r\n  .filter__input::placeholder {\n    color: var(--diwa-text-secondary);\n  }\n\n  .filter__input:focus-visible {\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\n    outline-offset: var(--diwa-focus-ring-offset);\n  }\n\n  .filter__input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\r\n  /* ── Options list ───────────────────────────────────────────────────── */\r\n\r\n  .options {\r\n    max-height: var(--diwa-select-dropdown-max-height);\r\n    overflow-y: auto;\r\n    padding: var(--diwa-space-1);\r\n  }\r\n\r\n  .options::-webkit-scrollbar {\r\n    width: var(--diwa-scrollbar-width);\r\n  }\r\n\r\n  .options::-webkit-scrollbar-track {\r\n    background: transparent;\r\n  }\r\n\r\n  .options::-webkit-scrollbar-thumb {\r\n    background-color: var(--diwa-border);\r\n    border-radius: var(--diwa-radius-sm);\r\n  }\r\n\r\n  /* ── Compact ────────────────────────────────────────────────────────── */\r\n\r\n  :host([compact]) .trigger {\n    min-height: var(--diwa-touch-target-min-size-compact, 32px);\n    font-size: var(--diwa-font-size-md);\n    padding: 0 var(--diwa-space-2);\n  }\n\r\n  /* ── States: error / success ────────────────────────────────────────── */\r\n\r\n  :host([state=\"error\"]) .trigger {\r\n    border-color: var(--diwa-notification-error);\r\n  }\r\n\r\n  :host([state=\"success\"]) .trigger {\r\n    border-color: var(--diwa-notification-success);\r\n  }\r\n\r\n  /* ── Message ────────────────────────────────────────────────────────── */\r\n\r\n  .message {\r\n    display: block;\r\n    margin-top: var(--diwa-space-1);\r\n    font-size: var(--diwa-font-size-sm);\r\n    line-height: var(--diwa-line-height-normal);\r\n    color: var(--diwa-text-secondary);\r\n  }\r\n\r\n  :host([state=\"error\"]) .message {\r\n    color: var(--diwa-notification-error);\r\n  }\r\n\r\n  :host([state=\"success\"]) .message {\r\n    color: var(--diwa-notification-success);\r\n  }\r\n\r\n  /* ── Disabled ───────────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) .trigger {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n  }\r\n\r\n  :host([disabled]) .label {\r\n    opacity: var(--diwa-opacity-disabled);\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.trigger', '.trigger__chevron', '.filter__input')}\r\n`;\r\n\r\n\r\n"]}