@teseor/css 1.6.0 → 1.8.0

package/src/{04-components → components}/forms/fieldset/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Fieldset - groups related form fields
 // Resets native fieldset chrome, provides consistent spacing and optional border
@@ -63,7 +63,7 @@
   // Disabled state - fieldset[disabled] natively disables children
   .fieldset:disabled,
   .fieldset[aria-disabled='true'] {
-    opacity: 0.5;
+    opacity: var(--ui-opacity-disabled, 0.5);
     cursor: not-allowed;
   }
 }

package/src/{04-components → components}/forms/form/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Form - layout container for form fields
 // Provides consistent vertical spacing between fields, sections, and actions

package/src/{04-components → components}/forms/form-error/form-error.docs.json

@@ -9,7 +9,7 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<span class=\"ui-form-error\">This field is required</span>",
+          "items": [{ "tag": "span", "class": "ui-form-error", "text": "This field is required" }],
           "code": "<span class=\"ui-form-error\">This field is required</span>"
         }
       ]
@@ -18,7 +18,28 @@
       "title": "With Icon",
       "examples": [
         {
-          "html": "<span class=\"ui-form-error\"><svg class=\"ui-form-error__icon ui-icon ui-icon--sm\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>Please enter a valid email</span>",
+          "items": [
+            {
+              "tag": "span",
+              "class": "ui-form-error",
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-form-error__icon ui-icon ui-icon--sm",
+                  "attrs": { "viewBox": "0 0 24 24", "fill": "currentColor" },
+                  "children": [
+                    {
+                      "tag": "path",
+                      "attrs": {
+                        "d": "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+                      }
+                    }
+                  ]
+                },
+                { "tag": "span", "text": "Please enter a valid email" }
+              ]
+            }
+          ],
           "code": "<span class=\"ui-form-error\">\n  <svg class=\"ui-form-error__icon ui-icon ui-icon--sm\">...</svg>\n  Please enter a valid email\n</span>"
         }
       ]

package/src/{04-components → components}/forms/form-error/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Form Error - validation error message for form fields
 // Displays error text with danger color

package/src/{04-components → components}/forms/form-helper/form-helper.docs.json

@@ -9,7 +9,9 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<span class=\"ui-form-helper\">Must be at least 8 characters</span>",
+          "items": [
+            { "tag": "span", "class": "ui-form-helper", "text": "Must be at least 8 characters" }
+          ],
           "code": "<span class=\"ui-form-helper\">Must be at least 8 characters</span>"
         }
       ]

package/src/{04-components → components}/forms/form-helper/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Form Helper - helper text for form fields
 // Displays muted text below form controls

package/src/{04-components → components}/forms/input/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component input
 // @element input
@@ -12,7 +12,7 @@
     --_bg: var(--ui-input-bg, var(--ui-color-bg, #{t.$color-bg}));
     --_border-color: var(--ui-input-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
     --_border-color-focus: var(--ui-input-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
-    --_text: var(--ui-input-text, var(--ui-color-text, #{t.$color-text}));
+    --_color: var(--ui-input-color, var(--ui-color-text, #{t.$color-text}));
     --_placeholder: var(--ui-input-placeholder, var(--ui-color-text-muted, #{t.$color-text-muted}));
   }
 
@@ -62,7 +62,7 @@
     font-family: inherit;
     font-size: var(--_font-size);
     line-height: 1;
-    color: var(--_text);
+    color: var(--_color);
 
     background: var(--_bg);
     border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
@@ -76,20 +76,22 @@
       color: var(--_placeholder);
     }
 
-    &:hover:not(:disabled, :focus) {
+    &:hover:not(:disabled, :focus-visible) {
       border-color: var(--ui-color-border-strong, #{t.$color-border-strong});
     }
 
-    &:focus,
+    &:focus-visible,
     &--focus {
       border-color: var(--_border-color-focus);
-      outline: none;
+      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid transparent;
+      outline-offset: var(--ui-border-width-sm, #{t.$border-width-sm});
+
       box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
     }
 
     &:disabled,
     &--disabled {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
     }
 

package/src/{04-components → components}/forms/input/input.api.json

@@ -73,7 +73,7 @@
       "default": "var(--ui-color-primary)"
     },
     {
-      "name": "--ui-input-text",
+      "name": "--ui-input-color",
       "default": "var(--ui-color-text)"
     },
     {
@@ -82,7 +82,7 @@
     },
     {
       "name": "--ui-input-height-sm",
-      "default": "calc(#{t.$row} * 1.5"
+      "default": "calc(var(--ui-row) * 1.5"
     },
     {
       "name": "--ui-input-font-size-sm",
@@ -90,7 +90,7 @@
     },
     {
       "name": "--ui-input-height-lg",
-      "default": "calc(#{t.$row} * 2.5"
+      "default": "calc(var(--ui-row) * 2.5"
     },
     {
       "name": "--ui-input-padding-x-lg",

package/src/{04-components → components}/forms/input/input.docs.json

@@ -9,7 +9,13 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<input class=\"ui-input\" type=\"text\" placeholder=\"Enter text...\">"
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-input",
+              "attrs": { "type": "text", "placeholder": "Enter text..." }
+            }
+          ]
         }
       ]
     },
@@ -17,7 +23,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "input",
@@ -43,7 +49,7 @@
       "title": "Variants",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "input",
@@ -69,7 +75,7 @@
       "title": "States",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "input",
@@ -105,7 +111,13 @@
       "title": "Full Width",
       "examples": [
         {
-          "html": "<input class=\"ui-input ui-input--block\" type=\"text\" placeholder=\"Full width input\">"
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-input ui-input--block",
+              "attrs": { "type": "text", "placeholder": "Full width input" }
+            }
+          ]
         }
       ]
     },
@@ -113,7 +125,34 @@
       "title": "With Prefix Icon",
       "examples": [
         {
-          "html": "<div class=\"ui-input-group ui-input-group--has-prefix\"><span class=\"ui-input-group__addon ui-input-group__addon--start\"><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/></svg></span><input class=\"ui-input ui-input--block\" type=\"search\" placeholder=\"Search...\"></div>",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-input-group ui-input-group--has-prefix",
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-input-group__addon ui-input-group__addon--start",
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon",
+                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                      "children": [
+                        { "tag": "circle", "attrs": { "cx": "11", "cy": "11", "r": "8" } },
+                        { "tag": "path", "attrs": { "d": "m21 21-4.3-4.3" } }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "input",
+                  "class": "ui-input ui-input--block",
+                  "attrs": { "type": "search", "placeholder": "Search..." }
+                }
+              ]
+            }
+          ],
           "code": "<div class=\"ui-input-group ui-input-group--has-prefix\">\n  <span class=\"ui-input-group__addon ui-input-group__addon--start\">\n    <svg class=\"ui-icon\"><!-- search icon --></svg>\n  </span>\n  <input class=\"ui-input ui-input--block\" type=\"search\" placeholder=\"Search...\">\n</div>"
         }
       ]
@@ -122,7 +161,40 @@
       "title": "With Suffix Icon",
       "examples": [
         {
-          "html": "<div class=\"ui-input-group ui-input-group--has-suffix\"><input class=\"ui-input ui-input--block\" type=\"email\" placeholder=\"Email address\"><span class=\"ui-input-group__addon ui-input-group__addon--end\"><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"/></svg></span></div>",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-input-group ui-input-group--has-suffix",
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-input ui-input--block",
+                  "attrs": { "type": "email", "placeholder": "Email address" }
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-input-group__addon ui-input-group__addon--end",
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon",
+                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                      "children": [
+                        {
+                          "tag": "rect",
+                          "attrs": { "width": "20", "height": "16", "x": "2", "y": "4", "rx": "2" }
+                        },
+                        {
+                          "tag": "path",
+                          "attrs": { "d": "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
           "code": "<div class=\"ui-input-group ui-input-group--has-suffix\">\n  <input class=\"ui-input ui-input--block\" type=\"email\" placeholder=\"Email\">\n  <span class=\"ui-input-group__addon ui-input-group__addon--end\">\n    <svg class=\"ui-icon\"><!-- mail icon --></svg>\n  </span>\n</div>"
         }
       ]
@@ -131,7 +203,52 @@
       "title": "With Both Addons",
       "examples": [
         {
-          "html": "<div class=\"ui-input-group ui-input-group--has-prefix ui-input-group--has-suffix\"><span class=\"ui-input-group__addon ui-input-group__addon--start\"><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/></svg></span><input class=\"ui-input ui-input--block\" type=\"text\" placeholder=\"Username\"><span class=\"ui-input-group__addon ui-input-group__addon--end ui-input-group__addon--interactive\"><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></span></div>",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-input-group ui-input-group--has-prefix ui-input-group--has-suffix",
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-input-group__addon ui-input-group__addon--start",
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon",
+                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": { "d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }
+                        },
+                        { "tag": "circle", "attrs": { "cx": "12", "cy": "7", "r": "4" } }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "input",
+                  "class": "ui-input ui-input--block",
+                  "attrs": { "type": "text", "placeholder": "Username" }
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-input-group__addon ui-input-group__addon--end ui-input-group__addon--interactive",
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon",
+                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                      "children": [
+                        { "tag": "path", "attrs": { "d": "M18 6 6 18" } },
+                        { "tag": "path", "attrs": { "d": "m6 6 12 12" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
           "code": "<div class=\"ui-input-group ui-input-group--has-prefix ui-input-group--has-suffix\">\n  <span class=\"ui-input-group__addon ui-input-group__addon--start\">...</span>\n  <input class=\"ui-input ui-input--block\" placeholder=\"Username\">\n  <span class=\"ui-input-group__addon ui-input-group__addon--end ui-input-group__addon--interactive\">...</span>\n</div>"
         }
       ]
@@ -141,12 +258,12 @@
     { "token": "--ui-input-height", "default": "var(--ui-row-2)", "description": "Default height" },
     {
       "token": "--ui-input-height-sm",
-      "default": "calc(var(--row) * 1.5)",
+      "default": "calc(var(--ui-row) * 1.5)",
       "description": "Small height"
     },
     {
       "token": "--ui-input-height-lg",
-      "default": "calc(var(--row) * 2.5)",
+      "default": "calc(var(--ui-row) * 2.5)",
       "description": "Large height"
     },
     {
@@ -179,7 +296,7 @@
       "default": "var(--ui-color-primary)",
       "description": "Focus border color"
     },
-    { "token": "--ui-input-text", "default": "var(--ui-color-text)", "description": "Text color" },
+    { "token": "--ui-input-color", "default": "var(--ui-color-text)", "description": "Text color" },
     {
       "token": "--ui-input-placeholder",
       "default": "var(--ui-color-text-muted)",

package/src/{04-components → components}/forms/label/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component label
 // @element label
@@ -30,7 +30,7 @@
     cursor: pointer;
 
     &[aria-disabled='true'] {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
     }
   }

package/src/{04-components → components}/forms/label/label.docs.json

@@ -9,7 +9,14 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<label class=\"ui-label\" for=\"input1\">Email address</label>",
+          "items": [
+            {
+              "tag": "label",
+              "class": "ui-label",
+              "text": "Email address",
+              "attrs": { "for": "input1" }
+            }
+          ],
           "code": "<label class=\"ui-label\" for=\"input\">Email address</label>"
         }
       ]
@@ -18,7 +25,17 @@
       "title": "Required",
       "examples": [
         {
-          "html": "<label class=\"ui-label\" for=\"input2\">Email address<span class=\"ui-label__required\">*</span></label>",
+          "items": [
+            {
+              "tag": "label",
+              "class": "ui-label",
+              "attrs": { "for": "input2" },
+              "children": [
+                { "text": "Email address" },
+                { "tag": "span", "class": "ui-label__required", "text": "*" }
+              ]
+            }
+          ],
           "code": "<label class=\"ui-label\" for=\"input\">\n  Email address\n  <span class=\"ui-label__required\">*</span>\n</label>"
         }
       ]
@@ -27,7 +44,17 @@
       "title": "Optional",
       "examples": [
         {
-          "html": "<label class=\"ui-label\" for=\"input3\">Phone number<span class=\"ui-label__optional\">(optional)</span></label>",
+          "items": [
+            {
+              "tag": "label",
+              "class": "ui-label",
+              "attrs": { "for": "input3" },
+              "children": [
+                { "text": "Phone number" },
+                { "tag": "span", "class": "ui-label__optional", "text": "(optional)" }
+              ]
+            }
+          ],
           "code": "<label class=\"ui-label\" for=\"input\">\n  Phone number\n  <span class=\"ui-label__optional\">(optional)</span>\n</label>"
         }
       ]
@@ -36,8 +63,11 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
-          "html": "<label class=\"ui-label\">Default size</label><label class=\"ui-label ui-label--lg\">Large size</label>",
+          "layout": "column",
+          "items": [
+            { "tag": "label", "class": "ui-label", "text": "Default size" },
+            { "tag": "label", "class": "ui-label ui-label--lg", "text": "Large size" }
+          ],
           "code": "<label class=\"ui-label\">Default</label>\n<label class=\"ui-label ui-label--lg\">Large</label>"
         }
       ]
@@ -46,7 +76,14 @@
       "title": "Disabled",
       "examples": [
         {
-          "html": "<label class=\"ui-label\" aria-disabled=\"true\">Disabled label</label>",
+          "items": [
+            {
+              "tag": "label",
+              "class": "ui-label",
+              "text": "Disabled label",
+              "attrs": { "aria-disabled": "true" }
+            }
+          ],
           "code": "<label class=\"ui-label\" aria-disabled=\"true\">Disabled</label>"
         }
       ]

package/src/components/forms/number-input/index.scss

@@ -0,0 +1,153 @@
+@use '../../../config/tokens/variables' as t;
+
+// @component number-input
+// @element div
+
+@layer components.tokens {
+  .number-input {
+    --_height: var(--ui-number-input-height, var(--ui-row-2, #{t.$row-2}));
+    --_padding-x: var(--ui-number-input-padding-x, var(--ui-space-1, #{t.$space-1}));
+    --_font-size: var(--ui-number-input-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_radius: var(--ui-number-input-radius, var(--ui-radius-md, #{t.$radius-md}));
+    --_bg: var(--ui-number-input-bg, var(--ui-color-bg, #{t.$color-bg}));
+    --_border-color: var(--ui-number-input-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    --_border-color-focus: var(--ui-number-input-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    --_text: var(--ui-number-input-text, var(--ui-color-text, #{t.$color-text}));
+    --_button-color: var(--ui-number-input-button-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_button-bg: var(--ui-number-input-button-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_button-hover-bg: var(--ui-number-input-button-hover-bg, var(--ui-color-border, #{t.$color-border}));
+  }
+
+  // @modifier size
+  .number-input--sm {
+    --_height: var(--ui-number-input-height-sm, calc(#{t.$row} * 1.5));
+    --_font-size: var(--ui-number-input-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
+  }
+
+  .number-input--lg {
+    --_height: var(--ui-number-input-height-lg, calc(#{t.$row} * 2.5));
+    --_padding-x: var(--ui-number-input-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    --_font-size: var(--ui-number-input-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+  }
+}
+
+@layer components.styles {
+  .number-input {
+    display: inline-flex;
+    align-items: center;
+
+    block-size: var(--_height);
+
+    background: var(--_bg);
+    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border-radius: var(--_radius);
+
+    transition:
+      border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
+      box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+
+    &:focus-within {
+      border-color: var(--_border-color-focus);
+      box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
+    }
+
+    &--block {
+      inline-size: 100%;
+    }
+
+    &--disabled,
+    &:has(.number-input__field:disabled) {
+      opacity: var(--ui-opacity-disabled, 0.5);
+      cursor: not-allowed;
+    }
+  }
+
+  .number-input__field {
+    flex: 1;
+
+    block-size: 100%;
+    min-inline-size: 0;
+    padding: 0 var(--_padding-x);
+
+    font-family: inherit;
+    font-size: var(--_font-size);
+    line-height: 1;
+    text-align: center;
+    color: var(--_text);
+
+    background: transparent;
+    border: none;
+    outline: none;
+
+    // Hide native spinners
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      margin: 0;
+
+      appearance: none;
+    }
+
+    &[type='number'] {
+      appearance: textfield;
+    }
+  }
+
+  .number-input__decrement,
+  .number-input__increment {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    block-size: 100%;
+    inline-size: var(--_height);
+    padding: 0;
+    margin: 0;
+
+    color: var(--_button-color);
+
+    background: var(--_button-bg);
+    border: none;
+    cursor: pointer;
+
+    transition: background var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+
+    &:hover:not(:disabled) {
+      background: var(--_button-hover-bg);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--ui-color-focus, #{t.$color-focus});
+      outline-offset: -2px;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    svg {
+      block-size: var(--ui-size-sm, #{t.size(sm)});
+      inline-size: var(--ui-size-sm, #{t.size(sm)});
+
+      fill: none;
+      stroke: currentcolor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  }
+
+  .number-input__decrement {
+    border-start-start-radius: calc(var(--_radius) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+    border-end-start-radius: calc(var(--_radius) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+
+    border-inline-end: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+  }
+
+  .number-input__increment {
+    border-start-end-radius: calc(var(--_radius) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+    border-end-end-radius: calc(var(--_radius) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+
+    border-inline-start: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+  }
+}