@warp-ds/elements 2.2.0-next.21 → 2.2.0-next.23

package/dist/packages/rip-and-tear-radio/radio-styles.js

@@ -1,170 +1 @@
-import{css as r}from"lit";var a=r`
-  :host {
-    color: var(--wa-form-control-value-color);
-    display: inline-flex;
-    flex-direction: row;
-    align-items: top;
-    font-family: inherit;
-    font-weight: var(--wa-form-control-value-font-weight);
-    line-height: var(--wa-form-control-value-line-height);
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  :host(:focus) {
-    outline: none;
-  }
-
-  [part~='label'] {
-    display: inline;
-  }
-
-  [part~='hint'] {
-    margin-block-start: 0.5em;
-  }
-
-  /* Default appearance */
-  :host([appearance='default']) .control {
-    flex: 0 0 auto;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--wa-form-control-toggle-size, 2rem);
-    height: var(--wa-form-control-toggle-size, 2rem);
-    border-color: var(--wa-form-control-border-color, gray);
-    border-radius: 50%;
-    border-style: var(--wa-form-control-border-style, solid);
-    border-width: var(--wa-form-control-border-width, 1px);
-    background-color: var(--wa-form-control-background-color, white);
-    color: transparent;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-
-    margin-inline-end: 0.5em;
-  }
-
-  :host([appearance='clickable']) .control {
-    position: absolute;
-    inset: 0;
-    height: 100%;
-    width: 100%;
-    cursor: pointer;
-  }
-
-  /* Checked */
-  :host(:state(checked)):not(:host([appearance='clickable'])) .control {
-    /* color: var(--checked-icon-color, white); */
-    border-color: var(--wa-form-control-activated-color, blue);
-    background-color: var(--wa-form-control-background-color, white);
-    border-width: 0.6rem;
-  }
-
-  /* Focus */
-  :host(:focus-visible) .control {
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: var(--w-outline-offset, 1px);
-  }
-
-  :host([appearance='clickable']:focus-visible) .control {
-    outline-offset: -4px;
-    border-radius: 8px;
-  }
-
-  /* Disabled */
-  :host(:state(disabled)) {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* Button appearance */
-  :host([appearance='button']) {
-    align-items: center;
-    min-height: var(--wa-form-control-height);
-    background-color: var(--wa-color-surface-default);
-    border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
-    border-radius: var(--wa-border-radius-m);
-    padding: 0 var(--wa-form-control-padding-inline);
-    transition:
-      background-color var(--wa-transition-fast),
-      border-color var(--wa-transition-fast);
-  }
-
-  :host([appearance='button']) .control {
-    display: none;
-  }
-
-  /* Horizontal grouping - remove inner border radius */
-  :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-inner]) {
-    border-radius: 0;
-  }
-
-  :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-first]) {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-last]) {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  /* Vertical grouping - remove inner border radius */
-  :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-inner]) {
-    border-radius: 0;
-  }
-
-  :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-first]) {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-last]) {
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
-  }
-
-  @media (hover: hover) {
-    :host([appearance='button']:hover:not(:state(disabled), :state(checked))) {
-      background-color: color-mix(in srgb, var(--wa-color-surface-default) 95%, var(--wa-color-mix-hover));
-    }
-  }
-
-  :host([appearance='button']:focus-visible) {
-    outline: var(--wa-focus-ring);
-    outline-offset: var(--wa-focus-ring-offset);
-  }
-
-  :host([appearance='button']:state(checked)) {
-    border-color: var(--wa-form-control-activated-color);
-    background-color: var(--wa-color-brand-fill-quiet);
-  }
-
-  :host([appearance='button']:state(checked):focus-visible) {
-    outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-brand-border-loud);
-    outline-offset: var(--wa-focus-ring-offset);
-  }
-
-  /* Remove inner borders and handle overlap */
-  :host([appearance='button'][data-wa-radio-horizontal]:not([data-wa-radio-first])) {
-    margin-inline-start: calc(-1 * var(--wa-form-control-border-width));
-  }
-
-  :host([appearance='button'][data-wa-radio-vertical]:not([data-wa-radio-first])) {
-    margin-block-start: calc(-1 * var(--wa-form-control-border-width));
-  }
-
-  /* Ensure interactive states are visible above adjacent buttons */
-  :host([appearance='button']:hover),
-  :host([appearance='button']:state(checked)) {
-    position: relative;
-    z-index: 1;
-  }
-
-  :host([appearance='button']:focus-visible) {
-    z-index: 2;
-  }
-`;export{a as styles};
 //# sourceMappingURL=radio-styles.js.map

package/dist/packages/rip-and-tear-radio/radio-styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/rip-and-tear-radio/radio-styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    color: var(--wa-form-control-value-color);\n    display: inline-flex;\n    flex-direction: row;\n    align-items: top;\n    font-family: inherit;\n    font-weight: var(--wa-form-control-value-font-weight);\n    line-height: var(--wa-form-control-value-line-height);\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  [part~='label'] {\n    display: inline;\n  }\n\n  [part~='hint'] {\n    margin-block-start: 0.5em;\n  }\n\n  /* Default appearance */\n  :host([appearance='default']) .control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--wa-form-control-toggle-size, 2rem);\n    height: var(--wa-form-control-toggle-size, 2rem);\n    border-color: var(--wa-form-control-border-color, gray);\n    border-radius: 50%;\n    border-style: var(--wa-form-control-border-style, solid);\n    border-width: var(--wa-form-control-border-width, 1px);\n    background-color: var(--wa-form-control-background-color, white);\n    color: transparent;\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n\n    margin-inline-end: 0.5em;\n  }\n\n  :host([appearance='clickable']) .control {\n    position: absolute;\n    inset: 0;\n    height: 100%;\n    width: 100%;\n    cursor: pointer;\n  }\n\n  /* Checked */\n  :host(:state(checked)):not(:host([appearance='clickable'])) .control {\n    /* color: var(--checked-icon-color, white); */\n    border-color: var(--wa-form-control-activated-color, blue);\n    background-color: var(--wa-form-control-background-color, white);\n    border-width: 0.6rem;\n  }\n\n  /* Focus */\n  :host(:focus-visible) .control {\n    outline: 2px solid var(--w-s-color-border-focus);\n    outline-offset: var(--w-outline-offset, 1px);\n  }\n\n  :host([appearance='clickable']:focus-visible) .control {\n    outline-offset: -4px;\n    border-radius: 8px;\n  }\n\n  /* Disabled */\n  :host(:state(disabled)) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  /* Button appearance */\n  :host([appearance='button']) {\n    align-items: center;\n    min-height: var(--wa-form-control-height);\n    background-color: var(--wa-color-surface-default);\n    border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);\n    border-radius: var(--wa-border-radius-m);\n    padding: 0 var(--wa-form-control-padding-inline);\n    transition:\n      background-color var(--wa-transition-fast),\n      border-color var(--wa-transition-fast);\n  }\n\n  :host([appearance='button']) .control {\n    display: none;\n  }\n\n  /* Horizontal grouping - remove inner border radius */\n  :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-inner]) {\n    border-radius: 0;\n  }\n\n  :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-first]) {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-last]) {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  /* Vertical grouping - remove inner border radius */\n  :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-inner]) {\n    border-radius: 0;\n  }\n\n  :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-first]) {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-last]) {\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n  }\n\n  @media (hover: hover) {\n    :host([appearance='button']:hover:not(:state(disabled), :state(checked))) {\n      background-color: color-mix(in srgb, var(--wa-color-surface-default) 95%, var(--wa-color-mix-hover));\n    }\n  }\n\n  :host([appearance='button']:focus-visible) {\n    outline: var(--wa-focus-ring);\n    outline-offset: var(--wa-focus-ring-offset);\n  }\n\n  :host([appearance='button']:state(checked)) {\n    border-color: var(--wa-form-control-activated-color);\n    background-color: var(--wa-color-brand-fill-quiet);\n  }\n\n  :host([appearance='button']:state(checked):focus-visible) {\n    outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-brand-border-loud);\n    outline-offset: var(--wa-focus-ring-offset);\n  }\n\n  /* Remove inner borders and handle overlap */\n  :host([appearance='button'][data-wa-radio-horizontal]:not([data-wa-radio-first])) {\n    margin-inline-start: calc(-1 * var(--wa-form-control-border-width));\n  }\n\n  :host([appearance='button'][data-wa-radio-vertical]:not([data-wa-radio-first])) {\n    margin-block-start: calc(-1 * var(--wa-form-control-border-width));\n  }\n\n  /* Ensure interactive states are visible above adjacent buttons */\n  :host([appearance='button']:hover),\n  :host([appearance='button']:state(checked)) {\n    position: relative;\n    z-index: 1;\n  }\n\n  :host([appearance='button']:focus-visible) {\n    z-index: 2;\n  }\n`;\n"],
-  "mappings": "AAAA,OAAS,OAAAA,MAAW,MAEb,IAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": ["css", "styles"]
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
 }