@primer/view-components 0.35.0-rc.8db9f2a2 → 0.35.0-rc.9bea5b2d

package/app/components/primer/primer.js

@@ -21,8 +21,8 @@ import './beta/auto_complete/auto_complete';
 import './beta/clipboard_copy';
 import './beta/relative_time';
 import './alpha/tab_container';
-import '../../../lib/primer/forms/primer_multi_input';
-import '../../../lib/primer/forms/primer_text_field';
-import '../../../lib/primer/forms/toggle_switch_input';
+import '../../lib/primer/forms/primer_multi_input';
+import '../../lib/primer/forms/primer_text_field';
+import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';

package/app/lib/primer/forms/primer_multi_input.d.ts

@@ -0,0 +1,10 @@
+export declare class PrimerMultiInputElement extends HTMLElement {
+    fields: HTMLInputElement[];
+    activateField(name: string): void;
+    private findField;
+}
+declare global {
+    interface Window {
+        PrimerMultiInputElement: typeof PrimerMultiInputElement;
+    }
+}

package/app/lib/primer/forms/primer_text_field.d.ts

@@ -0,0 +1,28 @@
+import '@github/auto-check-element';
+import type { AutoCheckErrorEvent, AutoCheckSuccessEvent } from '@github/auto-check-element';
+declare global {
+    interface HTMLElementEventMap {
+        'auto-check-success': AutoCheckSuccessEvent;
+        'auto-check-error': AutoCheckErrorEvent;
+    }
+}
+export declare class PrimerTextFieldElement extends HTMLElement {
+    #private;
+    inputElement: HTMLInputElement;
+    validationElement: HTMLElement;
+    validationMessageElement: HTMLElement;
+    validationSuccessIcon: HTMLElement;
+    validationErrorIcon: HTMLElement;
+    leadingVisual: HTMLElement;
+    leadingSpinner: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    clearContents(): void;
+    clearError(): void;
+    setValidationMessage(message: string): void;
+    toggleValidationStyling(isError: boolean): void;
+    setSuccess(message: string): void;
+    setError(message: string): void;
+    showLeadingSpinner(): void;
+    hideLeadingSpinner(): void;
+}

package/app/lib/primer/forms/toggle_switch_input.d.ts

@@ -0,0 +1,5 @@
+export declare class ToggleSwitchInputElement extends HTMLElement {
+    validationElement: HTMLElement;
+    validationMessageElement: HTMLElement;
+    connectedCallback(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.35.0-rc.8db9f2a2",
+  "version": "0.35.0-rc.9bea5b2d",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -26,6 +26,8 @@
     "app/components/primer/**/*.css",
     "app/components/primer/**/*.css.json",
     "app/components/primer/**/*.d.ts",
+    "app/lib/primer/forms/**/*.js",
+    "app/lib/primer/forms/**/*.d.ts",
     "lib/primer/forms/**/*.js",
     "lib/primer/forms/**/*.d.ts"
   ],
@@ -66,7 +68,7 @@
     "@playwright/test": "^1.35.1",
     "@primer/css": "21.3.6",
     "@primer/primitives": "^9.0.2",
-    "@primer/stylelint-config": "^12.7.2",
+    "@primer/stylelint-config": "^13.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
@@ -84,13 +86,12 @@
     "postcss": "^8.4.16",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.0.0",
-    "postcss-mixins": "^10.0.0",
+    "postcss-mixins": "^11.0.1",
     "postcss-preset-env": "^10.0.2",
     "prettier": "^3.3.2",
     "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",
-    "stylelint": "^16.1.0",
-    "stylelint-config-standard": "^36.0.0",
+    "stylelint-actions-formatters": "^16.3.1",
     "tslib": "^2.4.0",
     "typescript": "^5.2.2",
     "vite": "^5.4.3",

package/static/arguments.json

@@ -2468,6 +2468,18 @@
         "default": "`:outside_bottom`",
         "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
       },
+      {
+        "name": "loading_label",
+        "type": "String",
+        "default": "`\"Loading content...\"`",
+        "description": "The aria-label to use when the panel is loading, defaults to 'Loading content...'."
+      },
+      {
+        "name": "loading_description",
+        "type": "String",
+        "default": "`nil`",
+        "description": "The description to use when the panel is loading. If not provided, no description will be used."
+      },
       {
         "name": "banner_scheme",
         "type": "Symbol",

package/static/classes.json

@@ -501,6 +501,12 @@
   "SelectPanel-loadingPanel": [
     "Primer::Alpha::SelectPanel"
   ],
+  "Stack": [
+    "Primer::Alpha::Stack"
+  ],
+  "StackItem": [
+    "Primer::Alpha::StackItem"
+  ],
   "State": [
     "Primer::Beta::State"
   ],

package/static/info_arch.json

@@ -7653,6 +7653,18 @@
         "default": "`:outside_bottom`",
         "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
       },
+      {
+        "name": "loading_label",
+        "type": "String",
+        "default": "`\"Loading content...\"`",
+        "description": "The aria-label to use when the panel is loading, defaults to 'Loading content...'."
+      },
+      {
+        "name": "loading_description",
+        "type": "String",
+        "default": "`nil`",
+        "description": "The description to use when the panel is loading. If not provided, no description will be used."
+      },
       {
         "name": "banner_scheme",
         "type": "Symbol",
@@ -7901,6 +7913,32 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/select_panel/custom_loading_label",
+        "name": "custom_loading_label",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/custom_loading_description",
+        "name": "custom_loading_description",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/select_panel/local_fetch_no_results",
         "name": "local_fetch_no_results",
@@ -17254,6 +17292,6 @@
     "component": "BaseComponent",
     "fully_qualified_name": "Primer::BaseComponent",
     "description_md": "All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) previously used by [Primer React](https://primer.style/guides/react/system-props).\n\nUnder the hood, system arguments are [mapped](https://github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).\n\n## Responsive values\n\nTo apply different values across responsive breakpoints, pass an array with up to five values in the order `[default, small, medium, large, xlarge]`. To skip a breakpoint, pass `nil`.\n\nFor example:\n\n```erb\n<%= render Primer::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>\n  Hello world\n<% end %>\n```\n\nRenders:\n\n```html\n<h1 class=\"mt-0 mt-lg-4 mt-xl-2\">Hello world</h1>\n```",
-    "args_md": "## HTML attributes\n\nUse system arguments to add HTML attributes to elements. For the most part, system arguments map 1:1 to\nHTML attributes. For example, `render(Component.new(title: \"Foo\"))` will result in eg. `<div title=\"foo\">`.\nHowever, ViewComponents applies special handling to certain system arguments. See the table below for details.\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n\n## Utility classes\n\nViewComponents provides a convenient way to add Primer CSS utility classes to HTML elements. Use the shorthand\ndocumented in the tables below instead of adding CSS classes directly.\n\n### Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n### Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n### Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n### Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n### Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n### Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | Sets the element's width. One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | Sets the element's height. One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n### Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n### Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `px` | Integer | Horizontal padding. One of `0`, `1`, `2`, `3`, `4`, `5`, or `6`. |\n| `py` | Integer | Vertical padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n\n### Typography\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `font_family` | Symbol | Font family. One of `:mono`. |\n| `font_size` | String, Integer, Symbol | One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `00`, `:normal`, or `:small`. |\n| `font_style` | Symbol | Font style. One of `:italic`. |\n| `font_weight` | Symbol | Font weight. One of `:bold`, `:emphasized`, `:light`, or `:normal`. |\n| `text_align` | Symbol | Text alignment. One of `:center`, `:left`, or `:right`. |\n| `text_transform` | Symbol | Text transformation. One of `:capitalize` or `:uppercase`. |\n| `underline` | Boolean | Whether text should be underlined. |\n| `word_break` | Symbol | Whether to break words on line breaks. One of `:break_all` or `:break_word`. |\n\n### Other\n\n| Name | Type | Description |\n| :- | :- | :- |\n| classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |\n| test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |"
+    "args_md": "## HTML attributes\n\nUse system arguments to add HTML attributes to elements. For the most part, system arguments map 1:1 to\nHTML attributes. For example, `render(Component.new(title: \"Foo\"))` will result in eg. `<div title=\"foo\">`.\nHowever, ViewComponents applies special handling to certain system arguments. See the table below for details.\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n\n## Utility classes\n\nViewComponents provides a convenient way to add Primer CSS utility classes to HTML elements. Use the shorthand\ndocumented in the tables below instead of adding CSS classes directly.\n\n### Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n### Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n### Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n### Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n### Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n### Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | Sets the element's width. One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | Sets the element's height. One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n### Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n### Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding top. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `px` | Integer | Horizontal padding. One of `0`, `1`, `2`, `3`, `4`, `5`, or `6`. |\n| `py` | Integer | Vertical padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n\n### Typography\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `font_family` | Symbol | Font family. One of `:mono`. |\n| `font_size` | String, Integer, Symbol | One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `00`, `:normal`, or `:small`. |\n| `font_style` | Symbol | Font style. One of `:italic`. |\n| `font_weight` | Symbol | Font weight. One of `:bold`, `:emphasized`, `:light`, or `:normal`. |\n| `text_align` | Symbol | Text alignment. One of `:center`, `:left`, or `:right`. |\n| `text_transform` | Symbol | Text transformation. One of `:capitalize` or `:uppercase`. |\n| `underline` | Boolean | Whether text should be underlined. |\n| `word_break` | Symbol | Whether to break words on line breaks. One of `:break_all` or `:break_word`. |\n\n### Other\n\n| Name | Type | Description |\n| :- | :- | :- |\n| classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |\n| test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |"
   }
 ]

package/static/previews.json

@@ -5940,6 +5940,32 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/select_panel/custom_loading_label",
+        "name": "custom_loading_label",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/custom_loading_description",
+        "name": "custom_loading_description",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/select_panel/local_fetch_no_results",
         "name": "local_fetch_no_results",

package/app/components/primer/alpha/action_bar_element.d.ts

@@ -1,17 +0,0 @@
-import { ActionMenuElement } from './action_menu/action_menu_element';
-declare class ActionBarElement extends HTMLElement {
-    #private;
-    items: HTMLElement[];
-    itemContainer: HTMLElement;
-    moreMenu: ActionMenuElement;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    menuItemClick(event: Event): void;
-    update(): void;
-}
-declare global {
-    interface Window {
-        ActionBarElement: typeof ActionBarElement;
-    }
-}
-export {};

package/app/components/primer/alpha/action_list.d.ts

@@ -1,16 +0,0 @@
-export declare class ActionListTruncationObserver {
-    resizeObserver: ResizeObserver;
-    constructor(el: HTMLElement);
-    unobserve(el: HTMLElement): void;
-    update(el: HTMLElement): void;
-}
-export declare class ActionListElement extends HTMLElement {
-    #private;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-}
-declare global {
-    interface Window {
-        ActionListElement: typeof ActionListElement;
-    }
-}

package/app/components/primer/alpha/action_menu/action_menu_element.d.ts

@@ -1,42 +0,0 @@
-import '@oddbird/popover-polyfill';
-import type { IncludeFragmentElement } from '@github/include-fragment-element';
-type SelectVariant = 'none' | 'single' | 'multiple' | null;
-type SelectedItem = {
-    label: string | null | undefined;
-    value: string | null | undefined;
-    element: Element;
-};
-export declare class ActionMenuElement extends HTMLElement {
-    #private;
-    includeFragment: IncludeFragmentElement;
-    get selectVariant(): SelectVariant;
-    set selectVariant(variant: SelectVariant);
-    get dynamicLabelPrefix(): string;
-    set dynamicLabelPrefix(value: string);
-    get dynamicLabel(): boolean;
-    set dynamicLabel(value: boolean);
-    get popoverElement(): HTMLElement | null;
-    get invokerElement(): HTMLButtonElement | null;
-    get invokerLabel(): HTMLElement | null;
-    get selectedItems(): SelectedItem[];
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    handleEvent(event: Event): void;
-    get items(): HTMLElement[];
-    getItemById(itemId: string): HTMLElement | null;
-    isItemDisabled(item: Element | null): boolean;
-    disableItem(item: Element | null): void;
-    enableItem(item: Element | null): void;
-    isItemHidden(item: Element | null): boolean;
-    hideItem(item: Element | null): void;
-    showItem(item: Element | null): void;
-    isItemChecked(item: Element | null): boolean;
-    checkItem(item: Element | null): void;
-    uncheckItem(item: Element | null): void;
-}
-declare global {
-    interface Window {
-        ActionMenuElement: typeof ActionMenuElement;
-    }
-}
-export {};

package/app/components/primer/alpha/dropdown/menu.d.ts

@@ -1 +0,0 @@
-import '@github/details-menu-element';

package/app/components/primer/alpha/dropdown.d.ts

@@ -1 +0,0 @@
-import './dropdown/menu';

package/app/components/primer/alpha/image_crop.d.ts

@@ -1 +0,0 @@
-import '@github/image-crop-element';

package/app/components/primer/alpha/modal_dialog.d.ts

@@ -1,18 +0,0 @@
-export declare class ModalDialogElement extends HTMLElement {
-    #private;
-    openButton: HTMLButtonElement | null;
-    get open(): boolean;
-    set open(value: boolean);
-    get showButtons(): NodeList;
-    connectedCallback(): void;
-    show(): void;
-    close(closedNotCancelled?: boolean): void;
-}
-declare global {
-    interface Window {
-        ModalDialogElement: typeof ModalDialogElement;
-    }
-    interface HTMLElementTagNameMap {
-        'modal-dialog': ModalDialogElement;
-    }
-}

package/app/components/primer/alpha/segmented_control.d.ts

@@ -1,12 +0,0 @@
-declare class SegmentedControlElement extends HTMLElement {
-    #private;
-    items: HTMLElement[];
-    connectedCallback(): void;
-    select(event: Event): void;
-}
-declare global {
-    interface Window {
-        SegmentedControlElement: typeof SegmentedControlElement;
-    }
-}
-export {};

package/app/components/primer/alpha/select_panel_element.d.ts

@@ -1,63 +0,0 @@
-import { IncludeFragmentElement } from '@github/include-fragment-element';
-import type { AnchorAlignment, AnchorSide } from '@primer/behaviors';
-import '@oddbird/popover-polyfill';
-type SelectVariant = 'none' | 'single' | 'multiple' | null;
-type SelectedItem = {
-    label: string | null | undefined;
-    value: string | null | undefined;
-    inputName: string | null | undefined;
-};
-export type SelectPanelItem = HTMLLIElement;
-export type FilterFn = (item: SelectPanelItem, query: string) => boolean;
-export declare class SelectPanelElement extends HTMLElement {
-    #private;
-    includeFragment: IncludeFragmentElement;
-    dialog: HTMLDialogElement;
-    filterInputTextField: HTMLInputElement;
-    remoteInput: HTMLElement;
-    list: HTMLElement;
-    ariaLiveContainer: HTMLElement;
-    noResults: HTMLElement;
-    fragmentErrorElement: HTMLElement;
-    bannerErrorElement: HTMLElement;
-    bodySpinner: HTMLElement;
-    filterFn?: FilterFn;
-    get open(): boolean;
-    get selectVariant(): SelectVariant;
-    get ariaSelectionType(): string;
-    set selectVariant(variant: SelectVariant);
-    get dynamicLabelPrefix(): string;
-    get dynamicAriaLabelPrefix(): string;
-    set dynamicLabelPrefix(value: string);
-    get dynamicLabel(): boolean;
-    set dynamicLabel(value: boolean);
-    get invokerElement(): HTMLButtonElement | null;
-    get closeButton(): HTMLButtonElement | null;
-    get invokerLabel(): HTMLElement | null;
-    get selectedItems(): SelectedItem[];
-    get align(): AnchorAlignment;
-    get side(): AnchorSide;
-    updateAnchorPosition(): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    handleEvent(event: Event): void;
-    show(): void;
-    hide(): void;
-    get visibleItems(): SelectPanelItem[];
-    get items(): SelectPanelItem[];
-    get focusableItem(): HTMLElement | undefined;
-    getItemById(itemId: string): SelectPanelItem | null;
-    isItemDisabled(item: SelectPanelItem | null): boolean;
-    disableItem(item: SelectPanelItem | null): void;
-    enableItem(item: SelectPanelItem | null): void;
-    isItemHidden(item: SelectPanelItem | null): boolean;
-    isItemChecked(item: SelectPanelItem | null): boolean;
-    checkItem(item: SelectPanelItem | null): void;
-    uncheckItem(item: SelectPanelItem | null): void;
-}
-declare global {
-    interface Window {
-        SelectPanelElement: typeof SelectPanelElement;
-    }
-}
-export {};

package/app/components/primer/alpha/tab_container.d.ts

@@ -1 +0,0 @@
-import '@github/tab-container-element';

package/app/components/primer/alpha/toggle_switch.d.ts

@@ -1,34 +0,0 @@
-declare class ToggleSwitchElement extends HTMLElement {
-    switch: HTMLElement;
-    loadingSpinner: HTMLElement;
-    errorIcon: HTMLElement;
-    turbo: boolean;
-    private toggling;
-    get src(): string | null;
-    get csrf(): string | null;
-    get csrfField(): string;
-    isRemote(): boolean;
-    toggle(): Promise<void>;
-    turnOn(): void;
-    turnOff(): void;
-    isOn(): boolean;
-    isOff(): boolean;
-    isDisabled(): boolean;
-    disable(): void;
-    enable(): void;
-    private performToggle;
-    private setLoadingState;
-    private setSuccessState;
-    private setErrorState;
-    private setFinishedState;
-    private submitForm;
-}
-declare global {
-    interface Window {
-        ToggleSwitchElement: typeof ToggleSwitchElement;
-        Turbo: {
-            renderStreamMessage: (message: string) => void;
-        };
-    }
-}
-export {};

package/app/components/primer/alpha/tool_tip.d.ts

@@ -1,27 +0,0 @@
-import '@oddbird/popover-polyfill';
-type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw';
-declare class ToolTipElement extends HTMLElement {
-    #private;
-    styles(): string;
-    get showReason(): "focus" | "mouse";
-    get htmlFor(): string;
-    set htmlFor(value: string);
-    get type(): 'description' | 'label';
-    set type(value: 'description' | 'label');
-    get direction(): Direction;
-    set direction(value: Direction);
-    get control(): HTMLElement | null;
-    set hiddenFromView(value: true | false);
-    get hiddenFromView(): true | false;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    handleEvent(event: Event): Promise<void>;
-    static observedAttributes: string[];
-    attributeChangedCallback(name: string): void;
-}
-declare global {
-    interface Window {
-        ToolTipElement: typeof ToolTipElement;
-    }
-}
-export {};

package/app/components/primer/alpha/x_banner.d.ts

@@ -1,18 +0,0 @@
-declare global {
-    interface HTMLElementEventMap {
-        'banner:dismiss': CustomEvent<void>;
-    }
-}
-declare class XBannerElement extends HTMLElement {
-    #private;
-    titleText: HTMLElement;
-    dismiss(): void;
-    show(): void;
-    hide(): void;
-}
-declare global {
-    interface Window {
-        XBannerElement: typeof XBannerElement;
-    }
-}
-export {};

package/app/components/primer/anchored_position.d.ts

@@ -1,27 +0,0 @@
-import type { AnchorAlignment, AnchorSide, PositionSettings } from '@primer/behaviors';
-export default class AnchoredPositionElement extends HTMLElement implements PositionSettings {
-    #private;
-    get align(): AnchorAlignment;
-    set align(value: AnchorAlignment);
-    get side(): AnchorSide;
-    set side(value: AnchorSide);
-    get anchorOffset(): number;
-    set anchorOffset(value: number | 'normal' | 'spacious');
-    get anchor(): string;
-    set anchor(value: string);
-    get anchorElement(): HTMLElement | null;
-    set anchorElement(value: HTMLElement | null);
-    get alignmentOffset(): number;
-    set alignmentOffset(value: number);
-    get allowOutOfBounds(): boolean;
-    set allowOutOfBounds(value: boolean);
-    connectedCallback(): void;
-    static observedAttributes: string[];
-    attributeChangedCallback(): void;
-    update(): void;
-}
-declare global {
-    interface Window {
-        AnchoredPositionElement: typeof AnchoredPositionElement;
-    }
-}

package/app/components/primer/aria_live.d.ts

@@ -1,8 +0,0 @@
-export declare function announceFromElement(el: HTMLElement, options?: {
-    assertive?: boolean;
-    element?: HTMLElement;
-}): void;
-export declare function announce(message: string, options?: {
-    assertive?: boolean;
-    element?: HTMLElement;
-}): void;

package/app/components/primer/beta/auto_complete/auto_complete.d.ts

@@ -1 +0,0 @@
-import '@github/auto-complete-element';

package/app/components/primer/beta/clipboard_copy.d.ts

@@ -1 +0,0 @@
-import '@github/clipboard-copy-element';

package/app/components/primer/beta/nav_list.d.ts

@@ -1,20 +0,0 @@
-export declare class NavListElement extends HTMLElement {
-    #private;
-    items: HTMLElement[];
-    topLevelList: HTMLElement;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    selectItemById(itemId: string | null): boolean;
-    selectItemByHref(href: string | null): boolean;
-    selectItemByCurrentLocation(): boolean;
-    expandItem(item: HTMLElement): void;
-    collapseItem(item: HTMLElement): void;
-    itemIsExpanded(item: HTMLElement | null): boolean;
-    handleItemWithSubItemClick(e: Event): void;
-    handleItemWithSubItemKeydown(e: KeyboardEvent): void;
-}
-declare global {
-    interface Window {
-        NavListElement: typeof NavListElement;
-    }
-}

package/app/components/primer/beta/nav_list_group_element.d.ts

@@ -1,19 +0,0 @@
-export declare class NavListGroupElement extends HTMLElement {
-    #private;
-    showMoreItem: HTMLElement;
-    focusMarkers: HTMLElement[];
-    connectedCallback(): void;
-    get showMoreDisabled(): boolean;
-    set showMoreDisabled(value: boolean);
-    set currentPage(value: number);
-    get currentPage(): number;
-    get totalPages(): number;
-    get paginationSrc(): string;
-    private showMore;
-    private setShowMoreItemState;
-}
-declare global {
-    interface Window {
-        NavListGroupElement: typeof NavListGroupElement;
-    }
-}

package/app/components/primer/beta/relative_time.d.ts

@@ -1 +0,0 @@
-import '@github/relative-time-element';

package/app/components/primer/dialog_helper.d.ts

@@ -1,15 +0,0 @@
-export declare class DialogHelperElement extends HTMLElement {
-    #private;
-    get dialog(): HTMLDialogElement | null;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    handleEvent(event: MouseEvent): void;
-}
-declare global {
-    interface Window {
-        DialogHelperElement: typeof DialogHelperElement;
-    }
-    interface HTMLElementTagNameMap {
-        'dialog-helper': DialogHelperElement;
-    }
-}