chore(release): refresh private package staging

2026-08-10 00:55:12 +05:30
parent bca9549f3a
commit db612df6cd
69 changed files with 5421 additions and 7243 deletions
@@ -1,3 +1,5 @@
+import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
+
 component PinInput {
  outputs {
    input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -49,7 +51,7 @@ component PinInput {
  view {
    <fieldset
      {...attrs}
-      class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--pin-input {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
+      class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--pin-input {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
      data-wrn-pin-input
      data-length="{length}"
      data-pattern="{pattern}"
@@ -113,5 +115,127 @@ component PinInput {
        data-error="{name}"
      >{validationMessage}</small>
    </fieldset>
+    <ComponentBaseStyles hidden />
+  }
+
+  style {
+    .wire-next--pin-input.wire-next--invalid .wire-next__pin-cells input,
+    .wire-next--pin-input:has(input.wire-invalid) .wire-next__pin-cells input {
+      border-color: var(--wire-color-danger);
+    }
+
+    .wire-next--pin-input {
+      display: grid;
+      width: 100%;
+      min-width: 0;
+      gap: 0.65rem;
+      padding: 0;
+      border: 0;
+      color: var(--wire-color-text);
+    }
+
+    .wire-next__pin-heading {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+    }
+
+    .wire-next__pin-heading legend {
+      padding: 0;
+      font-size: 0.82em;
+      font-weight: 700;
+    }
+
+    .wire-next__pin-clear {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.35rem;
+      padding: 0;
+      border: 0;
+      color: var(--wire-component-color);
+      background: transparent;
+      font: inherit;
+      font-size: 0.7em;
+      font-weight: 750;
+      cursor: pointer;
+    }
+
+    .wire-next__pin-clear > span:first-child {
+      width: 0.9rem;
+      height: 0.9rem;
+    }
+
+    .wire-next__pin-cells {
+      display: flex;
+      max-width: 100%;
+      align-items: center;
+      gap: clamp(0.35rem, 1.5vw, 0.65rem);
+      overflow-x: auto;
+      padding: 0.2rem;
+      scrollbar-width: thin;
+    }
+
+    .wire-next--pin-input .wire-next__pin-cells input {
+      flex: 0 0 clamp(2.4rem, 8vw, 3.25rem);
+      width: clamp(2.4rem, 8vw, 3.25rem);
+      height: clamp(2.75rem, 9vw, 3.5rem);
+      min-width: clamp(2.4rem, 8vw, 3.25rem);
+      padding: 0;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius-sm);
+      color: var(--wire-color-text);
+      background: var(--wire-color-bg);
+      font: inherit;
+      font-size: clamp(1rem, 3vw, 1.25rem);
+      font-weight: 750;
+      text-align: center;
+      caret-color: var(--wire-component-color);
+      transition:
+        border-color var(--wire-motion-base) var(--wire-ease-standard),
+        box-shadow var(--wire-motion-base) var(--wire-ease-standard),
+        transform var(--wire-motion-fast) var(--wire-ease-standard);
+    }
+
+    .wire-next--pin-input .wire-next__pin-cells input::placeholder {
+      color: var(--wire-color-muted);
+      opacity: 0.45;
+    }
+
+    .wire-next--pin-input .wire-next__pin-cells input:focus-visible {
+      border-color: var(--wire-component-color);
+      outline: 0;
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent);
+      transform: translateY(-1px);
+    }
+
+    .wire-next--pin-input .wire-next__pin-cells input:disabled,
+    .wire-next--pin-input .wire-next__pin-cells input:read-only {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+
+    .wire-next__pin-separator {
+      color: var(--wire-color-muted);
+      font-size: 1.1rem;
+      font-weight: 800;
+    }
+
+    .wire-next--pin-input[data-complete="true"] .wire-next__pin-cells input {
+      border-color: color-mix(in srgb, var(--wire-component-color) 72%, var(--wire-color-border));
+      background: color-mix(in srgb, var(--wire-component-color) 7%, var(--wire-color-bg));
+    }
+
+    @media (max-width: 480px) {
+    .wire-next__pin-cells {
+        gap: 0.3rem;
+      }
+    .wire-next--pin-input .wire-next__pin-cells input {
+        flex-basis: min(2.7rem, 12vw);
+        width: min(2.7rem, 12vw);
+        min-width: min(2.7rem, 12vw);
+        height: min(3rem, 14vw);
+      }
+    }
  }
 }