@nysds/nys-select 1.13.1 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +2 -0
- package/dist/nys-option.d.ts +34 -0
- package/dist/nys-select.d.ts +108 -0
- package/dist/nys-select.figma.d.ts +1 -0
- package/dist/nys-select.js +1 -1
- package/package.json +5 -5
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* An option item for use within `nys-select`. Wraps a native `<option>` element.
|
|
4
|
+
*
|
|
5
|
+
* Place inside `nys-select`. Set `value` for form submission and `label` for display text.
|
|
6
|
+
* Alternatively, slot text content which auto-populates the label.
|
|
7
|
+
*
|
|
8
|
+
* @summary Option item for nys-select dropdown.
|
|
9
|
+
* @element nys-option
|
|
10
|
+
*
|
|
11
|
+
* @slot - Option label text. Auto-populates the `label` prop if provided.
|
|
12
|
+
*
|
|
13
|
+
* @example Basic options
|
|
14
|
+
* ```html
|
|
15
|
+
* <nys-select>
|
|
16
|
+
* <nys-option value="ny">New York</nys-option>
|
|
17
|
+
* <nys-option value="ca" disabled>California</nys-option>
|
|
18
|
+
* </nys-select>
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export declare class NysOption extends LitElement {
|
|
22
|
+
/** Prevents selection of this option. */
|
|
23
|
+
disabled: boolean;
|
|
24
|
+
/** Pre-selects this option. */
|
|
25
|
+
selected: boolean;
|
|
26
|
+
/** Value submitted when this option is selected. */
|
|
27
|
+
value: string;
|
|
28
|
+
/** Display text for the option. Auto-populated from slot content if not set. */
|
|
29
|
+
label: string;
|
|
30
|
+
/** Hides the option from the dropdown list. */
|
|
31
|
+
hidden: boolean;
|
|
32
|
+
firstUpdated(): void;
|
|
33
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
34
|
+
}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* A dropdown for selecting a single option from a list. Supports native `<option>` and `<optgroup>` elements.
|
|
4
|
+
* Form-associated with validation via ElementInternals.
|
|
5
|
+
*
|
|
6
|
+
* Use when users must choose one option from 7+ items. For fewer options, consider `nys-radiobutton`.
|
|
7
|
+
* For multiple selections, use `nys-checkbox` group instead.
|
|
8
|
+
*
|
|
9
|
+
* @summary Dropdown select for choosing one option from a list.
|
|
10
|
+
* @element nys-select
|
|
11
|
+
*
|
|
12
|
+
* @slot - Default slot for `<option>` and `<optgroup>` elements.
|
|
13
|
+
* @slot description - Custom HTML description content below the label.
|
|
14
|
+
*
|
|
15
|
+
* @fires nys-change - Fired when selection changes. Detail: `{id, value}`.
|
|
16
|
+
* @fires nys-focus - Fired when select gains focus.
|
|
17
|
+
* @fires nys-blur - Fired when select loses focus. Triggers validation.
|
|
18
|
+
*
|
|
19
|
+
* @example Basic select
|
|
20
|
+
* ```html
|
|
21
|
+
* <nys-select label="Select borough">
|
|
22
|
+
* <option value="bronx">The Bronx</option>
|
|
23
|
+
* <option value="brooklyn">Brooklyn</option>
|
|
24
|
+
* <option value="manhattan">Manhattan</option>
|
|
25
|
+
* </nys-select>
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @example With option groups
|
|
29
|
+
* ```html
|
|
30
|
+
* <nys-select label="Select service">
|
|
31
|
+
* <optgroup label="Transportation">
|
|
32
|
+
* <option value="mta">MTA</option>
|
|
33
|
+
* <option value="dmv">DMV</option>
|
|
34
|
+
* </optgroup>
|
|
35
|
+
* </nys-select>
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
38
|
+
export declare class NysSelect extends LitElement {
|
|
39
|
+
static styles: import("lit").CSSResult;
|
|
40
|
+
/** Unique identifier. Auto-generated if not provided. */
|
|
41
|
+
id: string;
|
|
42
|
+
/** Name for form submission. */
|
|
43
|
+
name: string;
|
|
44
|
+
/** Visible label text. Required for accessibility. */
|
|
45
|
+
label: string;
|
|
46
|
+
/** Helper text below label. Use slot for custom HTML. */
|
|
47
|
+
description: string;
|
|
48
|
+
/** Currently selected option value. */
|
|
49
|
+
value: string;
|
|
50
|
+
/** Prevents interaction. */
|
|
51
|
+
disabled: boolean;
|
|
52
|
+
/** Marks as required. Shows "Required" flag and validates on blur. */
|
|
53
|
+
required: boolean;
|
|
54
|
+
/** Shows "Optional" flag. Use when most fields are required. */
|
|
55
|
+
optional: boolean;
|
|
56
|
+
/** Tooltip text shown on hover/focus of info icon. */
|
|
57
|
+
tooltip: string;
|
|
58
|
+
/** Form `id` to associate with when select is outside form element. */
|
|
59
|
+
form: string | null;
|
|
60
|
+
/** Adjusts colors for dark backgrounds. */
|
|
61
|
+
inverted: boolean;
|
|
62
|
+
/** Shows error message when true. Set by validation or manually. */
|
|
63
|
+
showError: boolean;
|
|
64
|
+
/** Error message text. Shown only when `showError` is true. */
|
|
65
|
+
errorMessage: string;
|
|
66
|
+
/**
|
|
67
|
+
* Select width: `sm` (88px), `md` (200px), `lg` (384px), `full` (100%, default).
|
|
68
|
+
* @default "full"
|
|
69
|
+
*/
|
|
70
|
+
width: "sm" | "md" | "lg" | "full";
|
|
71
|
+
private _originalErrorMessage;
|
|
72
|
+
private _hasUserInteracted;
|
|
73
|
+
private _internals;
|
|
74
|
+
/**
|
|
75
|
+
* Lifecycle methods
|
|
76
|
+
* --------------------------------------------------------------------------
|
|
77
|
+
*/
|
|
78
|
+
static formAssociated: boolean;
|
|
79
|
+
constructor();
|
|
80
|
+
connectedCallback(): void;
|
|
81
|
+
disconnectedCallback(): void;
|
|
82
|
+
firstUpdated(): void;
|
|
83
|
+
private _handleSlotChange;
|
|
84
|
+
/**
|
|
85
|
+
* Form Integration
|
|
86
|
+
* --------------------------------------------------------------------------
|
|
87
|
+
*/
|
|
88
|
+
private _setValue;
|
|
89
|
+
private _manageRequire;
|
|
90
|
+
private _setValidityMessage;
|
|
91
|
+
private _validate;
|
|
92
|
+
formResetCallback(): void;
|
|
93
|
+
/**
|
|
94
|
+
* Functions
|
|
95
|
+
* --------------------------------------------------------------------------
|
|
96
|
+
*/
|
|
97
|
+
checkValidity(): boolean;
|
|
98
|
+
private _handleInvalid;
|
|
99
|
+
/**
|
|
100
|
+
* Event Handlers
|
|
101
|
+
* --------------------------------------------------------------------------
|
|
102
|
+
*/
|
|
103
|
+
private _handleChange;
|
|
104
|
+
private _handleFocus;
|
|
105
|
+
private _handleBlur;
|
|
106
|
+
updated(changedProperties: Map<string, unknown>): void;
|
|
107
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
108
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/nys-select.js
CHANGED
|
@@ -47,7 +47,7 @@ u([
|
|
|
47
47
|
o({ type: Boolean, reflect: !0 })
|
|
48
48
|
], c.prototype, "hidden");
|
|
49
49
|
customElements.define("nys-option", c);
|
|
50
|
-
const g = ':host{--_nys-select-width: 100%;--_nys-select-height: var(--nys-size-500, 40px);--_nys-select-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-select-font-size: var(--nys-font-size-ui-md, 16px);--_nys-select-font-weight: var(--nys-font-weight-regular, 400);--_nys-select-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-select-gap: var(--nys-space-50, 4px);--_nys-select-border-radius: var(--nys-radius-md, 4px);--_nys-select-padding: var(--nys-space-100, 8px) var(--nys-space-400, 32px) var(--nys-space-100, 8px) var(--nys-space-100, 8px);--_nys-select-color: var(--nys-color-text, #1b1b1b);--_nys-select-color--error: var( --nys-color-danger, var(--nys-color-red-600, #b52c2c) );--_nys-select-background-color: var(--nys-color-ink-reverse, #
|
|
50
|
+
const g = ':host{--_nys-select-width: 100%;--_nys-select-height: var(--nys-size-500, 40px);--_nys-select-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-select-font-size: var(--nys-font-size-ui-md, 16px);--_nys-select-font-weight: var(--nys-font-weight-regular, 400);--_nys-select-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-select-gap: var(--nys-space-50, 4px);--_nys-select-border-radius: var(--nys-radius-md, 4px);--_nys-select-padding: var(--nys-space-100, 8px) var(--nys-space-400, 32px) var(--nys-space-100, 8px) var(--nys-space-100, 8px);--_nys-select-color: var(--nys-color-text, #1b1b1b);--_nys-select-color--error: var( --nys-color-danger, var(--nys-color-red-600, #b52c2c) );--_nys-select-background-color: var(--nys-color-ink-reverse, #ffffff);--_nys-select-background-color--disabled: var( --nys-color-neutral-10, #f6f6f6 );--_nys-select-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-select-border-width: var(--nys-border-width-sm, 1px);--_nys-select-border-color: var(--nys-color-neutral-400, #909395);--_nys-select-border-color--hover: var(--nys-color-neutral-900, #1b1b1b);--_nys-select-border-color--focus: var(--nys-color-focus, #004dd1);--_nys-select-border-color--disabled: var(--nys-color-neutral-200, #bec0c1);--_nys-select-border-default: var(--nys-border-width-sm, 1px) solid var(--nys-color-neutral-400, #909395);--_nys-select-border-focus: var(--nys-border-width-sm, 1px) solid var(--nys-color-focus, var(--nys-color-blue-600, #004dd1));--_nys-select-border-disabled: var(--nys-border-width-sm, 1px) solid var(--nys-color-neutral-200, #bec0c1);--_nys-select-border-hover: var(--nys-border-width-sm, 1px) solid var(--nys-color-neutral-900, #1b1b1b)}.nys-select{display:flex;flex-direction:column;gap:var(--_nys-select-gap);font-family:var(--_nys-select-font-family)}.nys-select__select{color:var(--_nys-select-color);font-weight:var(--_nys-select-font-weight);font-family:var(--_nys-select-font-family);border-radius:var(--_nys-select-border-radius);border:solid var(--_nys-select-border-width) var(--_nys-select-border-color);font-size:var(--_nys-select-font-size);padding:var(--_nys-select-padding);width:var(--_nys-select-width);height:var(--_nys-select-height);max-width:100%;text-indent:1px;background:var(--_nys-select-background-color);appearance:none;text-overflow:ellipsis}.nys-select__selectwrapper{position:relative;display:inline-block;width:var(--_nys-select-width);max-width:100%}.nys-select__icon{color:var(--_nys-select-color);position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}:host([width=sm]){--_nys-select-width: var(--nys-select-form-width-sm, 88px)}:host([width=md]){--_nys-select-width: var(--nys-select-form-width-md, 200px)}:host([width=lg]){--_nys-select-width: var(--nys-select-form-width-lg, 384px)}:host([width=full]){--_nys-select-width: 100%;flex:1}.nys-select__select:hover:not(:disabled){cursor:pointer;border-color:var(--_nys-select-border-color--hover);outline:solid var(--_nys-select-border-width) var(--_nys-select-border-color--hover)}.nys-select__select:focus{border-color:var(--_nys-select-border-color--focus);outline:solid var(--_nys-select-border-width) var(--_nys-select-border-color--focus)}.nys-select__select:disabled{background-color:var(--_nys-select-background-color--disabled);border-color:var(--_nys-select-border-color--disabled);cursor:not-allowed;color:var(--_nys-select-color--disabled)}.nys-select__select:disabled~.nys-select__icon{color:var(--_nys-select-color--disabled)}:host([showError]){--_nys-select-border-default: var(--nys-border-width-sm, 1px) solid var(--_nys-select-color--error)}';
|
|
51
51
|
var w = Object.defineProperty, n = (y, e, t, d) => {
|
|
52
52
|
for (var l = void 0, s = y.length - 1, r; s >= 0; s--)
|
|
53
53
|
(r = y[s]) && (l = r(e, t, l) || l);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-select",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.0",
|
|
4
4
|
"description": "The Select component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-select.js",
|
|
6
6
|
"exports": {
|
|
@@ -22,14 +22,14 @@
|
|
|
22
22
|
"lit-analyze": "lit-analyzer '**/*.ts'"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@nysds/nys-icon": "^1.
|
|
26
|
-
"@nysds/nys-label": "^1.
|
|
27
|
-
"@nysds/nys-errormessage": "^1.
|
|
25
|
+
"@nysds/nys-icon": "^1.14.0",
|
|
26
|
+
"@nysds/nys-label": "^1.14.0",
|
|
27
|
+
"@nysds/nys-errormessage": "^1.14.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"lit": "^3.3.1",
|
|
31
31
|
"typescript": "^5.9.3",
|
|
32
|
-
"vite": "^7.1
|
|
32
|
+
"vite": "^7.3.1"
|
|
33
33
|
},
|
|
34
34
|
"keywords": [
|
|
35
35
|
"new-york-state",
|