@odx/foundation 1.0.0-rc.3 → 1.0.0-rc.5

package/dist/styles.css

@@ -1 +1,1069 @@
-@layer odx.reset{.odx-root{&,*,:before,:after{box-sizing:border-box}:not(:defined){visibility:hidden}& h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,dl,dt,dd,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input{appearance:none;border:0;margin:0;padding:0}& h1,h2,h3,h4,h5,h6{text-wrap:balance}& h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}& p{text-wrap:pretty}& img,picture,video,canvas,embed,iframe,object{max-width:100%;display:block}& button{font-family:inherit}& input,textarea,select{font-feature-settings:inherit;font-family:inherit;font-size:inherit}[popover]{border:none;outline:none}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){:before,*,:after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}}@layer odx.base{.odx-slot-placeholder-sm,.odx-slot-placeholder{background-color:var(--odx-color-background-accent-subtle);padding:var(--odx-spacing-layout-sm) var(--odx-spacing-layout-lg);width:100%;height:100%;min-height:var(--odx-control-height-md);text-align:center;text-overflow:ellipsis;pointer-events:none;-webkit-user-select:none;user-select:none;flex:1;place-content:center;overflow:hidden;&:before,&:after{display:block}&:before{text-transform:capitalize;font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-medium);content:attr(slot,"default") " slot"}&:after{line-height:var(--odx-typography-line-height-text-xs);color:var(--odx-color-foreground-subtle);font-size:var(--odx-typography-font-size-text-xs);content:"This is a placeholder. A Replace with your own content"}}.odx-slot-placeholder-sm{padding:var(--odx-spacing-12) var(--odx-spacing-layout-sm);min-height:var(--odx-control-addon-size-md);font-size:var(--odx-typography-font-size-text-sm);&:after{display:none}}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-spacing-layout-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-shrink{flex:none}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-spacing-layout-md);--_max-column-size:calc((100% - var(--gap) * (var(--max-columns) + 1)) / var(--max-columns));--_min-column-size:min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size), 1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}.odx-content :where(table),.odx-table{--cell-size:var(--odx-size-300);border-collapse:collapse;background-color:#0000;width:100%;max-width:100%;& caption{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-semibold)}& thead{background-color:inherit}& tr{transition:var(--odx-motion-transition-reduced);background-color:var(--odx-color-background-transparent);transition-property:background-color,color}& tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}& th,td{padding:var(--odx-control-spacing-md) var(--odx-control-spacing-inline-md);min-height:var(--odx-size-250);text-align:start;font-size:inherit}& th{border-bottom:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none}& td{height:var(--cell-size);vertical-align:middle}& tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle)}& th :is(odx-input,odx-select){margin-inline:var(--odx-spacing-negative-50)}}.odx-content{--_content-spacing-sm:var(--odx-spacing-layout-sm);--_content-spacing-md:var(--odx-spacing-layout-md);--_content-spacing-lg:var(--odx-spacing-layout-lg);line-height:var(--odx-typography-line-height-text-md);& table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe{margin:var(--_content-spacing-md) 0}:is(odx-key-value-list,odx-list){margin-block:var(--_content-spacing-md);:is(odx-key-value-list,odx-list){margin-block:0}}>:is(odx-text,.odx-text),li>:is(ul,ol,dl),p,li{margin:var(--_content-spacing-sm) 0}:is(odx-text,.odx-text),p{&:first-child{margin-block-start:0}}>:is(odx-title,[class*=odx-title]),h1,h2,h3,h4,h5,h6{margin-block:var(--_content-spacing-lg) var(--_content-spacing-sm);&:first-child{margin-block-start:var(--_content-spacing-sm)}}& table,ul,ol,dl,blockquote{padding-inline-start:var(--odx-spacing-150)}& code,pre,mark{border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}& code,pre{background-color:var(--odx-color-background-control-rest);font-size:var(--odx-typography-font-size-text-sm)}& blockquote{padding-inline-end:var(--odx-spacing-150)}& dt{font-weight:var(--odx-typography-font-weight-medium)}& a{text-decoration:underline}& del{color:var(--odx-color-foreground-danger-rest)}& figure{flex-direction:column;display:flex}& figcaption{padding:var(--_content-spacing-sm);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}& ins{color:var(--odx-color-foreground-success-rest);text-decoration:none}& mark{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}& pre{padding:var(--odx-control-spacing-md) calc(2 * var(--odx-control-spacing-inline-md))}& small{font-size:var(--odx-typography-font-size-text-sm)}& var{font-weight:var(--odx-typography-font-weight-medium)}}.odx-content-sm{--_content-spacing-md:var(--odx-spacing-layout-sm);--_content-spacing-lg:var(--odx-spacing-layout-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}.odx-content-box{background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-layout-lg);border-radius:0}.odx-link,.odx-root a{transition:var(--odx-motion-transition-reduced);cursor:pointer;overflow:inherit;vertical-align:baseline;text-align:start;-webkit-text-decoration:initial;text-decoration:initial;text-overflow:inherit;color:var(--odx-color-foreground-accent-rest);-webkit-user-select:text;user-select:text;border-radius:1px;outline:0;font-family:inherit;font-size:1em;transition-property:color;display:inline-block;&:active{color:var(--odx-color-foreground-accent-pressed)}&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none}@media(hover:hover){&:hover:not([disabled],:active,:focus-visible){color:var(--odx-color-foreground-accent-hover);text-decoration:underline}}}.odx-text{font-weight:var(--odx-typography-font-weight-normal);overflow-wrap:break-word;display:block}.odx-text-inline{display:inline-block}.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}.odx-text-neutral{color:var(--odx-color-foreground-rest)}.odx-text-accent{color:var(--odx-color-foreground-accent-rest)}.odx-text-success{color:var(--odx-color-foreground-success-rest)}.odx-text-danger{color:var(--odx-color-foreground-danger-rest)}.odx-text-subtle{color:var(--odx-color-foreground-subtle)}.odx-text-disabled{color:var(--odx-color-foreground-disabled-rest)}[class*=odx-title],.odx-root :is(h1,h2,h3,h4,h5,h6){font-weight:var(--odx-typography-font-weight-semibold);text-wrap:balance;overflow-wrap:break-word;display:block}.odx-title{line-height:inherit;font-size:inherit}.odx-title-xs,.odx-root h6{line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}.odx-title-sm,.odx-root h5{line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}.odx-title-md,.odx-root h4{line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}.odx-title-lg,.odx-root h3{line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}.odx-title-xl,.odx-root h2,.odx-title-xxl,.odx-root h1,[class*=odx-title-display-]{font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xl,.odx-root h2{line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}.odx-title-xxl,.odx-root h1{line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}:root{interpolate-size:allow-keywords}.odx-root{tab-size:4;line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji";font-size:var(--odx-typography-font-size-base);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scrollbar-width:thin;::selection{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}}html.odx-root{scroll-behavior:smooth;scrollbar-color:var(--odx-color-special-scrollbar) transparent;height:100%;&:not(:has(body.odx-light-mode),:has(body.odx-dark-mode)){background-color:var(--odx-color-background-base)}& body{margin:0;padding:0}}}@layer odx.overrides{.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}.odx-w-xs{max-width:var(--odx-layout-width-xs)}.odx-w-sm{max-width:var(--odx-layout-width-sm)}.odx-w-md{max-width:var(--odx-layout-width-md)}.odx-w-lg{max-width:var(--odx-layout-width-lg)}.odx-w-xl{max-width:var(--odx-layout-width-xl)}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-g-sm{--gap:var(--odx-spacing-layout-sm);gap:var(--odx-spacing-layout-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-layout-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-layout-sm)}.odx-g-md{--gap:var(--odx-spacing-layout-md);gap:var(--odx-spacing-layout-md)}.odx-gx-md{column-gap:var(--odx-spacing-layout-md)}.odx-gy-md{row-gap:var(--odx-spacing-layout-md)}.odx-g-lg{--gap:var(--odx-spacing-layout-lg);gap:var(--odx-spacing-layout-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-layout-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-layout-lg)}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-p-sm{padding:var(--odx-spacing-layout-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-layout-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-layout-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-layout-sm)}.odx-py-sm{padding-block:var(--odx-spacing-layout-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-layout-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-layout-sm)}.odx-p-md{padding:var(--odx-spacing-layout-md)}.odx-px-md{padding-inline:var(--odx-spacing-layout-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-layout-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-layout-md)}.odx-py-md{padding-block:var(--odx-spacing-layout-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-layout-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-layout-md)}.odx-p-lg{padding:var(--odx-spacing-layout-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-layout-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-layout-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-layout-lg)}.odx-py-lg{padding-block:var(--odx-spacing-layout-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-layout-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-layout-lg)}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-m-sm{margin:var(--odx-spacing-layout-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-layout-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-layout-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-layout-sm)}.odx-my-sm{margin-block:var(--odx-spacing-layout-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-layout-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-layout-sm)}.odx-m-md{margin:var(--odx-spacing-layout-md)}.odx-mx-md{margin-inline:var(--odx-spacing-layout-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-layout-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-layout-md)}.odx-my-md{margin-block:var(--odx-spacing-layout-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-layout-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-layout-md)}.odx-m-lg{margin:var(--odx-spacing-layout-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-layout-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-layout-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-layout-lg)}.odx-my-lg{margin-block:var(--odx-spacing-layout-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-layout-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-layout-lg)}}
+@layer odx-native {
+  .odx-root {
+    &, & *, & :before, & :after {
+      box-sizing: border-box;
+    }
+
+    & :not(:defined) {
+      visibility: hidden;
+    }
+
+    & h1, & h2, & h3, & h4, & h5, & h6, & p, & blockquote, & pre, & a, & code, & img, & svg, & small, & strike, & strong, & sub, & sup, & b, & u, & i, & ol, & ul, & li, & dl, & dt, & dd, & form, & label, & table, & caption, & tbody, & tfoot, & thead, & tr, & th, & td, & main, & article, & aside, & canvas, & footer, & header, & nav, & section, & time, & button, & video, & textarea, & input {
+      appearance: none;
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    & h1, & h2, & h3, & h4, & h5, & h6 {
+      text-wrap: balance;
+    }
+
+    & h1, & h2, & h3, & h4, & h5, & h6, & p {
+      overflow-wrap: break-word;
+    }
+
+    & p {
+      text-wrap: pretty;
+    }
+
+    & img, & picture, & video, & canvas, & embed, & iframe, & object {
+      max-width: 100%;
+      display: block;
+    }
+
+    & button {
+      font-family: inherit;
+    }
+
+    & input, & textarea, & select {
+      font-feature-settings: inherit;
+      font-family: inherit;
+      font-size: inherit;
+    }
+
+    & [popover] {
+      border: none;
+      outline: none;
+    }
+
+    & [hidden] {
+      display: none !important;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      & *, & :before, & :after {
+        scroll-behavior: auto !important;
+        transition-duration: 0s !important;
+        animation-duration: 0s !important;
+        animation-iteration-count: 1 !important;
+      }
+    }
+  }
+
+  .odx-link, .odx-root a {
+    transition: var(--odx-motion-transition-reduced);
+    overflow: inherit;
+    vertical-align: baseline;
+    text-align: start;
+    text-decoration: initial;
+    text-overflow: inherit;
+    color: var(--odx-color-foreground-accent-rest);
+    cursor: pointer;
+    user-select: text;
+    border-radius: 1px;
+    outline: 0;
+    font-family: inherit;
+    font-size: 1em;
+    transition-property: color;
+    display: inline-block;
+
+    &:active {
+      color: var(--odx-color-foreground-accent-pressed);
+    }
+
+    &:focus-visible {
+      outline: var(--odx-focus-ring-outer);
+      outline-offset: var(--odx-focus-ring-offset-sm);
+    }
+
+    &:visited {
+      color: var(--odx-color-special-link-visited);
+    }
+
+    &[disabled] {
+      color: var(--odx-color-foreground-disabled-rest);
+      pointer-events: none;
+      user-select: none;
+    }
+
+    @media (hover: hover) {
+      &:hover:not([disabled], :active, :focus-visible) {
+        color: var(--odx-color-foreground-accent-hover);
+        text-decoration: underline;
+      }
+    }
+  }
+
+  :root {
+    interpolate-size: allow-keywords;
+  }
+
+  .odx-root {
+    transition: opacity var(--odx-motion-duration-slow) linear;
+    tab-size: 4;
+    line-height: var(--odx-typography-line-height-base);
+    color: var(--odx-color-foreground-rest);
+    font-family: var(--odx-typography-font-family-base), "Noto Sans", Kanit, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji";
+    font-size: var(--odx-typography-font-size-base);
+    text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+    scrollbar-width: thin;
+
+    &[inert] {
+      opacity: 0;
+      transition-duration: 0s;
+    }
+  }
+
+  html.odx-root {
+    scroll-behavior: smooth;
+    scrollbar-color: var(--odx-color-special-scrollbar) transparent;
+    height: 100%;
+
+    &:not(:has(body.odx-light-mode), :has(body.odx-dark-mode)) {
+      background-color: var(--odx-color-background-base);
+    }
+
+    & body {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  .odx-content :where(table), .odx-table {
+    --cell-size: var(--odx-size-300);
+    border-collapse: collapse;
+    background-color: #0000;
+    width: 100%;
+    max-width: 100%;
+
+    & caption {
+      line-height: var(--odx-typography-line-height-text-sm);
+      font-size: var(--odx-typography-font-size-text-sm);
+      font-weight: var(--odx-typography-font-weight-semibold);
+    }
+
+    & thead {
+      background-color: inherit;
+    }
+
+    & tr {
+      transition: var(--odx-motion-transition-reduced);
+      background-color: var(--odx-color-background-transparent);
+      transition-property: background-color, color;
+    }
+
+    & tr:has(td):hover {
+      background-color: var(--odx-color-background-transparent-hover);
+    }
+
+    & th, & td {
+      padding: var(--odx-control-spacing-md) var(--odx-control-spacing-inline-md);
+      min-height: var(--odx-size-250);
+      text-align: start;
+      font-size: inherit;
+    }
+
+    & th {
+      border-bottom: var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);
+      vertical-align: top;
+      font-weight: var(--odx-typography-font-weight-medium);
+      cursor: default;
+      user-select: none;
+    }
+
+    & td {
+      height: var(--cell-size);
+      vertical-align: middle;
+    }
+
+    & tr:not(:last-child) td {
+      border-bottom: var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);
+    }
+
+    & th :is(odx-input, odx-select) {
+      margin-inline: var(--odx-spacing-negative-50);
+    }
+  }
+
+  .odx-content {
+    --_content-spacing-sm: var(--odx-spacing-layout-sm);
+    --_content-spacing-md: var(--odx-spacing-layout-md);
+    --_content-spacing-lg: var(--odx-spacing-layout-lg);
+    line-height: var(--odx-typography-line-height-text-md);
+
+    & table, & ul, & ol, & dl, & blockquote, & pre, & figure, & video, & embed, & iframe {
+      margin: var(--_content-spacing-md) 0;
+    }
+
+    & :is(odx-key-value-list, odx-list) {
+      margin-block: var(--_content-spacing-md);
+
+      & :is(odx-key-value-list, odx-list) {
+        margin-block: 0;
+      }
+    }
+
+    & > :is(odx-text, .odx-text), & li > :is(ul, ol, dl), & p, & li {
+      margin: var(--_content-spacing-sm) 0;
+    }
+
+    & :is(odx-text, .odx-text), & p {
+      &:first-child {
+        margin-block-start: 0;
+      }
+    }
+
+    & > :is(odx-title, [class*="odx-title"]), & h1, & h2, & h3, & h4, & h5, & h6 {
+      margin-block: var(--_content-spacing-lg) var(--_content-spacing-sm);
+
+      &:first-child {
+        margin-block-start: var(--_content-spacing-sm);
+      }
+    }
+
+    & table, & ul, & ol, & dl, & blockquote {
+      padding-inline-start: var(--odx-spacing-150);
+    }
+
+    & code, & pre, & mark {
+      border-radius: var(--odx-border-radius-sm);
+      padding: 0 var(--odx-spacing-12);
+    }
+
+    & code, & pre {
+      background-color: var(--odx-color-background-control-rest);
+      font-size: var(--odx-typography-font-size-text-sm);
+    }
+
+    & blockquote {
+      padding-inline-end: var(--odx-spacing-150);
+    }
+
+    & dt {
+      font-weight: var(--odx-typography-font-weight-medium);
+    }
+
+    & a {
+      text-decoration: underline;
+    }
+
+    & del {
+      color: var(--odx-color-foreground-danger-rest);
+    }
+
+    & figure {
+      flex-direction: column;
+      display: flex;
+    }
+
+    & figcaption {
+      padding: var(--_content-spacing-sm);
+      line-height: var(--odx-typography-line-height-text-sm);
+      font-size: var(--odx-typography-font-size-text-sm);
+    }
+
+    & ins {
+      color: var(--odx-color-foreground-success-rest);
+      text-decoration: none;
+    }
+
+    & mark {
+      background-color: var(--odx-color-background-selection);
+      color: var(--odx-color-foreground-rest);
+    }
+
+    & pre {
+      padding: var(--odx-control-spacing-md) calc(2 * var(--odx-control-spacing-inline-md));
+    }
+
+    & small {
+      font-size: var(--odx-typography-font-size-text-sm);
+    }
+
+    & var {
+      font-weight: var(--odx-typography-font-weight-medium);
+    }
+  }
+
+  .odx-content-sm {
+    --_content-spacing-md: var(--odx-spacing-layout-sm);
+    --_content-spacing-lg: var(--odx-spacing-layout-md);
+    line-height: var(--odx-typography-line-height-text-sm);
+    font-size: var(--odx-typography-font-size-text-sm);
+  }
+
+  .odx-content-box {
+    background-color: var(--odx-color-background-level-1);
+    padding: var(--odx-spacing-layout-lg);
+    border-radius: 0;
+  }
+}
+
+@layer odx-utils {
+  .odx-cloak:has(:not(:defined)) {
+    animation: 2s step-end odx-cloak-hide;
+  }
+
+  @keyframes odx-cloak-hide {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .odx-visually-hidden:not(:focus-within), .odx-visually-hidden-force {
+    clip-path: rect(0 0 0 0) !important;
+    white-space: nowrap !important;
+    border: none !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    position: absolute !important;
+    overflow: hidden !important;
+  }
+
+  .odx-cluster, .odx-flank, .odx-stack {
+    gap: var(--odx-spacing-layout-md);
+    max-width: 100%;
+    text-align: inherit;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    display: flex;
+  }
+
+  .odx-cluster {
+    flex-flow: wrap;
+    align-items: center;
+  }
+
+  .odx-flank {
+    flex-direction: row;
+  }
+
+  .odx-stack {
+    align-items: stretch;
+  }
+
+  .odx-flank:not(.odx-justify-end) > :not(:first-child), .odx-flank.odx-justify-end > :not(:last-child), .odx-fill {
+    flex: 1;
+  }
+
+  .odx-shrink {
+    flex: none;
+  }
+
+  :where(.odx-align-baseline, .odx-align-start, .odx-align-center, .odx-align-end, .odx-align-stretch) {
+    display: flex;
+  }
+
+  .odx-align-baseline {
+    align-items: baseline;
+  }
+
+  .odx-align-self-baseline {
+    align-self: baseline;
+  }
+
+  .odx-align-start {
+    align-items: flex-start;
+  }
+
+  .odx-align-self-start {
+    align-self: flex-start;
+  }
+
+  .odx-align-center {
+    align-items: center;
+  }
+
+  .odx-align-self-center {
+    align-self: center;
+  }
+
+  .odx-align-end {
+    align-items: flex-end;
+  }
+
+  .odx-align-self-end {
+    align-self: flex-end;
+  }
+
+  .odx-align-stretch {
+    align-items: stretch;
+  }
+
+  .odx-align-self-stretch {
+    align-self: stretch;
+  }
+
+  :where(.odx-justify-start, .odx-justify-end, .odx-justify-center, .odx-justify-space-between, .odx-justify-space-around, .odx-justify-space-evenly) {
+    display: flex;
+  }
+
+  .odx-justify-start {
+    justify-content: flex-start;
+  }
+
+  .odx-justify-end {
+    justify-content: flex-end;
+  }
+
+  .odx-justify-center {
+    justify-content: center;
+  }
+
+  .odx-justify-space-around {
+    justify-content: space-around;
+  }
+
+  .odx-justify-space-between {
+    justify-content: space-between;
+  }
+
+  .odx-justify-space-evenly {
+    justify-content: space-evenly;
+  }
+
+  :where(.odx-nowrap, .odx-wrap, .odx-wrap-reverse) {
+    display: flex;
+  }
+
+  .odx-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .odx-wrap {
+    flex-wrap: wrap;
+  }
+
+  .odx-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+
+  [class*="odx-auto-grid"] {
+    --max-columns: 6;
+    --min-column-size: 250px;
+    --gap: var(--odx-spacing-layout-md);
+    --_max-column-size: calc((100% - var(--gap) * (var(--max-columns) + 1)) / var(--max-columns));
+    --_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));
+    --_column-size: minmax(var(--_min-column-size), 1fr);
+    grid-template-columns: repeat(auto-fit, var(--_column-size));
+    gap: var(--gap);
+    place-content: center;
+    display: grid;
+  }
+
+  .odx-auto-grid-fill {
+    grid-template-columns: repeat(auto-fill, var(--_column-size));
+  }
+
+  [class*="odx-text"] {
+    line-height: var(--odx-typography-line-height-base);
+    font-family: var(--odx-typography-font-family-base);
+    font-weight: var(--odx-typography-font-weight-normal);
+  }
+
+  .odx-text-xs {
+    line-height: var(--odx-typography-line-height-text-xs);
+    font-size: var(--odx-typography-font-size-text-xs);
+  }
+
+  .odx-text-sm {
+    line-height: var(--odx-typography-line-height-text-sm);
+    font-size: var(--odx-typography-font-size-text-sm);
+  }
+
+  .odx-text-md {
+    line-height: var(--odx-typography-line-height-text-md);
+    font-size: var(--odx-typography-font-size-text-md);
+  }
+
+  .odx-text-lg {
+    line-height: var(--odx-typography-line-height-text-lg);
+    font-size: var(--odx-typography-font-size-text-lg);
+  }
+
+  .odx-text-strong {
+    font-weight: var(--odx-typography-font-weight-medium);
+  }
+
+  [class*="odx-title"], .odx-root :where(h1, h2, h3, h4, h5, h6) {
+    text-wrap: balance;
+    font-family: var(--odx-typography-font-family-base);
+    font-weight: var(--odx-typography-font-weight-semibold);
+  }
+
+  .odx-title {
+    line-height: inherit;
+    font-size: inherit;
+  }
+
+  .odx-title-xs, .odx-root h6 {
+    line-height: var(--odx-typography-line-height-heading-xs);
+    font-size: var(--odx-typography-font-size-heading-xs);
+  }
+
+  .odx-title-sm, .odx-root h5 {
+    line-height: var(--odx-typography-line-height-heading-sm);
+    font-size: var(--odx-typography-font-size-heading-sm);
+  }
+
+  .odx-title-md, .odx-root h4 {
+    line-height: var(--odx-typography-line-height-heading-md);
+    font-size: var(--odx-typography-font-size-heading-md);
+  }
+
+  .odx-title-lg, .odx-root h3 {
+    line-height: var(--odx-typography-line-height-heading-lg);
+    font-size: var(--odx-typography-font-size-heading-lg);
+  }
+
+  .odx-title-xl, .odx-root h2, .odx-title-xxl, .odx-root h1, [class*="odx-title-display-"] {
+    font-family: var(--odx-typography-font-family-brand);
+    font-weight: var(--odx-typography-font-weight-medium);
+  }
+
+  .odx-title-xl, .odx-root h2 {
+    line-height: var(--odx-typography-line-height-heading-xl);
+    font-size: var(--odx-typography-font-size-heading-xl);
+  }
+
+  .odx-title-xxl, .odx-root h1 {
+    line-height: var(--odx-typography-line-height-heading-xxl);
+    font-size: var(--odx-typography-font-size-heading-xxl);
+  }
+
+  .odx-title-display-sm {
+    line-height: var(--odx-typography-line-height-display-sm);
+    font-size: var(--odx-typography-font-size-display-sm);
+  }
+
+  .odx-title-display-md {
+    line-height: var(--odx-typography-line-height-display-md);
+    font-size: var(--odx-typography-font-size-display-md);
+  }
+
+  .odx-title-display-lg {
+    line-height: var(--odx-typography-line-height-display-lg);
+    font-size: var(--odx-typography-font-size-display-lg);
+  }
+
+  .odx-title-display-xl {
+    line-height: var(--odx-typography-line-height-display-xl);
+    font-size: var(--odx-typography-font-size-display-xl);
+  }
+
+  .odx-no-overflow {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  :where() {
+    background-color: var(--odx-color-background-selection);
+    color: var(--odx-color-foreground-rest);
+  }
+
+  .odx-fg-rest {
+    color: var(--odx-color-foreground-rest);
+  }
+
+  .odx-fg-body {
+    color: var(--odx-color-foreground-on);
+  }
+
+  .odx-fg-inverse {
+    color: var(--odx-color-foreground-inverse-rest);
+  }
+
+  .odx-fg-inverse-static {
+    color: var(--odx-color-foreground-inverse-static);
+  }
+
+  .odx-fg-accent {
+    color: var(--odx-color-foreground-accent-rest);
+  }
+
+  .odx-fg-success {
+    color: var(--odx-color-foreground-success-rest);
+  }
+
+  .odx-fg-danger {
+    color: var(--odx-color-foreground-danger-rest);
+  }
+
+  .odx-fg-subtle {
+    color: var(--odx-color-foreground-subtle);
+  }
+
+  .odx-fg-disabled {
+    color: var(--odx-color-foreground-disabled-rest);
+  }
+
+  :is(.odx-bg-base, .odx-bg-content, .odx-bg-elevated):not(.odx-fg-disabled) {
+    color: var(--odx-color-foreground-rest);
+  }
+
+  .odx-bg-base {
+    background-color: var(--odx-color-background-base);
+  }
+
+  .odx-bg-content {
+    background-color: var(--odx-color-background-level-1);
+  }
+
+  .odx-bg-elevated {
+    background-color: var(--odx-color-background-level-2);
+  }
+
+  .odx-bg-topmost {
+    background-color: var(--odx-color-background-level-3);
+
+    &:not(.odx-fg-disabled) {
+      color: var(--odx-color-foreground-inverse);
+    }
+  }
+
+  .odx-bg-brand {
+    background-color: var(--odx-color-background-brand);
+    color: var(--odx-color-foreground-inverse-static);
+
+    &.odx-fg-disabled, & .odx-fg-disabled {
+      color: var(--odx-color-foreground-disabled-on-brand);
+    }
+  }
+
+  .odx-bg-accent {
+    background-color: var(--odx-color-background-accent-rest);
+    color: var(--odx-color-foreground-inverse-static);
+  }
+
+  .odx-bg-danger {
+    background-color: var(--odx-color-background-danger-rest);
+    color: var(--odx-color-foreground-inverse-static);
+  }
+
+  .odx-bg-primary {
+    background-color: var(--odx-color-background-primary-rest);
+    color: var(--odx-color-foreground-inverse);
+  }
+
+  .odx-g-0 {
+    --gap: 0px;
+    gap: 0;
+  }
+
+  .odx-gx-0 {
+    column-gap: 0;
+  }
+
+  .odx-gy-0 {
+    row-gap: 0;
+  }
+
+  .odx-g-sm {
+    --gap: var(--odx-spacing-layout-sm);
+    gap: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-gx-sm {
+    column-gap: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-gy-sm {
+    row-gap: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-g-md {
+    --gap: var(--odx-spacing-layout-md);
+    gap: var(--odx-spacing-layout-md);
+  }
+
+  .odx-gx-md {
+    column-gap: var(--odx-spacing-layout-md);
+  }
+
+  .odx-gy-md {
+    row-gap: var(--odx-spacing-layout-md);
+  }
+
+  .odx-g-lg {
+    --gap: var(--odx-spacing-layout-lg);
+    gap: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-gx-lg {
+    column-gap: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-gy-lg {
+    row-gap: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-p-0 {
+    padding: 0;
+  }
+
+  .odx-px-0 {
+    padding-inline: 0;
+  }
+
+  .odx-pl-0 {
+    padding-inline-start: 0;
+  }
+
+  .odx-pr-0 {
+    padding-inline-end: 0;
+  }
+
+  .odx-py-0 {
+    padding-block: 0;
+  }
+
+  .odx-pt-0 {
+    padding-block-start: 0;
+  }
+
+  .odx-pb-0 {
+    padding-block-end: 0;
+  }
+
+  .odx-p-sm {
+    padding: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-px-sm {
+    padding-inline: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-pl-sm {
+    padding-inline-start: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-pr-sm {
+    padding-inline-end: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-py-sm {
+    padding-block: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-pt-sm {
+    padding-block-start: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-pb-sm {
+    padding-block-end: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-p-md {
+    padding: var(--odx-spacing-layout-md);
+  }
+
+  .odx-px-md {
+    padding-inline: var(--odx-spacing-layout-md);
+  }
+
+  .odx-pl-md {
+    padding-inline-start: var(--odx-spacing-layout-md);
+  }
+
+  .odx-pr-md {
+    padding-inline-end: var(--odx-spacing-layout-md);
+  }
+
+  .odx-py-md {
+    padding-block: var(--odx-spacing-layout-md);
+  }
+
+  .odx-pt-md {
+    padding-block-start: var(--odx-spacing-layout-md);
+  }
+
+  .odx-pb-md {
+    padding-block-end: var(--odx-spacing-layout-md);
+  }
+
+  .odx-p-lg {
+    padding: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-px-lg {
+    padding-inline: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-pl-lg {
+    padding-inline-start: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-pr-lg {
+    padding-inline-end: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-py-lg {
+    padding-block: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-pt-lg {
+    padding-block-start: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-pb-lg {
+    padding-block-end: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-m-auto {
+    margin: auto;
+  }
+
+  .odx-mx-auto {
+    margin-inline: auto;
+  }
+
+  .odx-ml-auto {
+    margin-inline-start: auto;
+  }
+
+  .odx-mr-auto {
+    margin-inline-end: auto;
+  }
+
+  .odx-my-auto {
+    margin-block: auto;
+  }
+
+  .odx-mt-auto {
+    margin-block-start: auto;
+  }
+
+  .odx-mb-auto {
+    margin-block-end: auto;
+  }
+
+  .odx-m-0 {
+    margin: 0;
+  }
+
+  .odx-mx-0 {
+    margin-inline: 0;
+  }
+
+  .odx-ml-0 {
+    margin-inline-start: 0;
+  }
+
+  .odx-mr-0 {
+    margin-inline-end: 0;
+  }
+
+  .odx-my-0 {
+    margin-block: 0;
+  }
+
+  .odx-mt-0 {
+    margin-block-start: 0;
+  }
+
+  .odx-mb-0 {
+    margin-block-end: 0;
+  }
+
+  .odx-m-sm {
+    margin: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-mx-sm {
+    margin-inline: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-ml-sm {
+    margin-inline-start: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-mr-sm {
+    margin-inline-end: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-my-sm {
+    margin-block: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-mt-sm {
+    margin-block-start: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-mb-sm {
+    margin-block-end: var(--odx-spacing-layout-sm);
+  }
+
+  .odx-m-md {
+    margin: var(--odx-spacing-layout-md);
+  }
+
+  .odx-mx-md {
+    margin-inline: var(--odx-spacing-layout-md);
+  }
+
+  .odx-ml-md {
+    margin-inline-start: var(--odx-spacing-layout-md);
+  }
+
+  .odx-mr-md {
+    margin-inline-end: var(--odx-spacing-layout-md);
+  }
+
+  .odx-my-md {
+    margin-block: var(--odx-spacing-layout-md);
+  }
+
+  .odx-mt-md {
+    margin-block-start: var(--odx-spacing-layout-md);
+  }
+
+  .odx-mb-md {
+    margin-block-end: var(--odx-spacing-layout-md);
+  }
+
+  .odx-m-lg {
+    margin: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-mx-lg {
+    margin-inline: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-ml-lg {
+    margin-inline-start: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-mr-lg {
+    margin-inline-end: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-my-lg {
+    margin-block: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-mt-lg {
+    margin-block-start: var(--odx-spacing-layout-lg);
+  }
+
+  .odx-mb-lg {
+    margin-block-end: var(--odx-spacing-layout-lg);
+  }
+
+  [class*="odx-w-xs"] {
+    max-width: var(--odx-layout-width-xs);
+  }
+
+  .odx-w-xs-static {
+    width: var(--odx-layout-width-xs);
+  }
+
+  [class*="odx-w-sm"] {
+    max-width: var(--odx-layout-width-sm);
+  }
+
+  .odx-w-sm-static {
+    width: var(--odx-layout-width-sm);
+  }
+
+  [class*="odx-w-md"] {
+    max-width: var(--odx-layout-width-md);
+  }
+
+  .odx-w-md-static {
+    width: var(--odx-layout-width-md);
+  }
+
+  [class*="odx-w-lg"] {
+    max-width: var(--odx-layout-width-lg);
+  }
+
+  .odx-w-lg-static {
+    width: var(--odx-layout-width-lg);
+  }
+
+  [class*="odx-w-xl"] {
+    max-width: var(--odx-layout-width-xl);
+  }
+
+  .odx-w-xl-static {
+    width: var(--odx-layout-width-xl);
+  }
+
+  [class*="odx-w-full"] {
+    max-width: 100%;
+  }
+
+  .odx-w-full-static {
+    width: 100%;
+  }
+}
+
+@layer odx-theme, odx-overrides;
+
+.odx-slot-placeholder-sm, .odx-slot-placeholder {
+  background-color: var(--odx-color-background-accent-subtle);
+  padding: var(--odx-spacing-layout-sm) var(--odx-spacing-layout-lg);
+  height: 100%;
+  min-height: var(--odx-control-height-md);
+  text-align: center;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  user-select: none;
+  flex: 1;
+  place-content: center;
+  overflow: hidden;
+
+  &:before, &:after {
+    display: block;
+  }
+
+  &:before {
+    text-transform: capitalize;
+    font-size: var(--odx-typography-font-size-text-sm);
+    font-weight: var(--odx-typography-font-weight-medium);
+    content: attr(slot, "default") " slot";
+  }
+
+  &:after {
+    line-height: var(--odx-typography-line-height-text-xs);
+    color: var(--odx-color-foreground-subtle);
+    font-size: var(--odx-typography-font-size-text-xs);
+    content: "This is a placeholder. A Replace with your own content";
+  }
+}
+
+.odx-slot-placeholder-sm {
+  padding: var(--odx-spacing-12) var(--odx-spacing-layout-sm);
+  min-height: var(--odx-control-addon-size-md);
+  font-size: var(--odx-typography-font-size-text-sm);
+
+  &:after {
+    display: none;
+  }
+}
+
+:root {
+  --odx-layout-width-page-min: 340px;
+  --odx-layout-width-page-default: 1440px;
+  --odx-layout-width-page-narrow: 1200px;
+  --odx-layout-width-page-wide: 1800px;
+}