@crowdstrike/glide-core 0.29.1 → 0.30.0

package/dist/modal.styles.js

@@ -1,6 +1,10 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(".component:focus-visible")}
-  `,css`
+import { css } from 'lit';
+import focusOutline from './styles/focus-outline.js';
+export default [
+    css `
+    ${focusOutline('.component:focus-visible')}
+  `,
+    css `
     /* When browser support improves, we can have nicer animations with https://caniuse.com/mdn-css_at-rules_starting-style */
     @keyframes backdrop-fade-in {
       from {
@@ -44,6 +48,22 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         }
       }
 
+      &.small {
+        inline-size: 25rem;
+      }
+
+      &.medium {
+        inline-size: 37.5rem;
+      }
+
+      &.large {
+        inline-size: 56.25rem;
+      }
+
+      &.xlarge {
+        inline-size: 71.875rem;
+      }
+
       &:focus {
         outline: none;
       }
@@ -66,33 +86,43 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     }
 
     .container {
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr) auto;
       max-block-size: 75vh;
-      max-inline-size: 80vw;
-      padding: var(--glide-core-spacing-base-md);
-
-      &.small {
-        inline-size: 22.5rem;
-      }
+    }
 
-      &.medium {
-        inline-size: 35rem;
-      }
+    .header {
+      background-color: var(
+        --glide-core-private-color-dialog-and-modal-surface-container
+      );
+      padding-block: var(--glide-core-spacing-base-md)
+        var(--glide-core-spacing-base-xs);
+      padding-inline: var(--glide-core-spacing-base-md);
+      transition: box-shadow var(--glide-core-duration-slow-01)
+        var(--glide-core-animation-linear);
 
-      &.large {
-        inline-size: 53.75rem;
-      }
+      /* So the box shadow isn't covered up by the body content. */
+      z-index: 1;
 
-      &.xlarge {
-        inline-size: 69.375rem;
+      &.shadow {
+        box-shadow: 0 10px 8px -8px
+          var(--glide-core-color-effect-color-scroll-shadow);
       }
     }
 
-    .header {
+    .label-and-actions {
       align-items: center;
       display: flex;
       justify-content: space-between;
     }
 
+    .description {
+      color: var(--glide-core-color-static-text-default);
+      font-size: var(--glide-core-typography-size-body-default);
+      font-weight: var(--glide-core-typography-weight-regular);
+      margin-block: 0;
+    }
+
     .label {
       align-items: center;
       color: var(--glide-core-color-static-text-default);
@@ -160,15 +190,33 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     }
 
     .body {
-      overflow: auto;
-      padding-block: var(--glide-core-spacing-base-xs);
-      padding-block-end: var(--glide-core-spacing-base-md);
+      overflow-y: auto;
+      padding-inline: var(--glide-core-spacing-base-md);
 
       &:focus {
         outline: none;
       }
     }
 
+    .footer {
+      background-color: var(
+        --glide-core-private-color-dialog-and-modal-surface-container
+      );
+      padding-block: var(--glide-core-spacing-base-xs)
+        var(--glide-core-spacing-base-md);
+      padding-inline: var(--glide-core-spacing-base-md);
+      transition: box-shadow var(--glide-core-duration-slow-01)
+        var(--glide-core-animation-linear);
+
+      /* So the box shadow isn't covered up by the body content. */
+      z-index: 1;
+
+      &.shadow {
+        box-shadow: 0 -10px 8px -8px
+          var(--glide-core-color-effect-color-scroll-shadow);
+      }
+    }
+
     .actions {
       align-items: center;
       display: flex;
@@ -189,4 +237,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       display: flex;
       gap: var(--glide-core-spacing-base-xxs);
     }
-  `];
+  `,
+];

package/dist/option.d.ts

@@ -0,0 +1,74 @@
+import { LitElement } from 'lit';
+import './options.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-option': Option;
+    }
+}
+/**
+ * @attr {string} label
+ * @attr {string} [description]
+ * @attr {boolean} [disabled=false]
+ * @attr {string} [href]
+ *
+ * @readonly
+ * @attr {string} [id]
+ *
+ * @attr {'menuitem'|'option'} [role='menuitem']
+ * @attr {boolean} [selected=false]
+ *
+ * @readonly
+ * @attr {number} [tabindex=-1]
+ *
+ * @attr {string} [value='']
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element | Text} [content] - This is the unhappy path. It's the escape hatch where you can render arbitrary content and lay it out however you need to. If you go this route, `slot="icon"` and `slot="submenu"` will become unavailable. And the `label` and `description` attributes won't be rendered. The `label` attribute is still required. We'll show it in a tooltip when your content overflows. If you need a second line of text in the tooltip, provide you can provide it via the `description` attribute.
+ * @slot {Element} [icon]
+ * @slot {Menu} [submenu]
+ */
+export default class Option extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * @default undefined
+     */
+    get label(): string | undefined;
+    set label(label: string);
+    /**
+     * @default undefined
+     */
+    get description(): string | undefined;
+    set description(description: string);
+    /**
+     * @default false
+     */
+    get disabled(): boolean;
+    set disabled(isDisabled: boolean);
+    href?: string;
+    readonly id: string;
+    get privateActive(): boolean;
+    set privateActive(isActive: boolean);
+    privateTooltipOpen: boolean;
+    role: 'menuitem' | 'option';
+    /**
+     * @default false
+     */
+    get selected(): boolean;
+    set selected(isSelected: boolean);
+    readonly tabIndex = -1;
+    value: string;
+    readonly version: string;
+    click(): void;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult;
+    updated(): void;
+    private hasContentSlot;
+    private hasIconSlot;
+    private hasSubMenuSlot;
+    private isContentSlotOverflow;
+    private isSubmenuOpen;
+}