@event-calendar/build 5.11.0 → 5.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -34,6 +34,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
34
34
  - [Usage](#usage)
35
35
  - [JavaScript module](#javascript-module)
36
36
  - [Svelte 5 component](#svelte-5-component)
37
+ - [Content snippets](#content-snippets)
37
38
  - [Standalone bundle](#standalone-bundle)
38
39
  - [Modifying options after initialization](#modifying-options-after-initialization)
39
40
  - [Options](#options)
@@ -259,13 +260,42 @@ Then in your Svelte 5 component, use the calendar like this:
259
260
  ```
260
261
  The calendar is destroyed gracefully when the component containing it is destroyed.
261
262
 
263
+ #### Content snippets
264
+ The options that define content can also be given as Svelte snippets:
265
+
266
+ * [allDayContent](#alldaycontent)
267
+ * [dayCellContent](#daycellcontent)
268
+ * [eventContent](#eventcontent)
269
+ * [moreLinkContent](#morelinkcontent)
270
+ * [noEventsContent](#noeventscontent)
271
+ * [resourceLabelContent](#resourcelabelcontent)
272
+ * [weekNumberContent](#weeknumbercontent)
273
+
274
+ A snippet is passed to the `Calendar` component under the name of the option it defines:
275
+ ```html
276
+ <Calendar plugins={[DayGrid]} {options}>
277
+ {#snippet eventContent({event, timeText})}
278
+ <b>{timeText}</b> {event.title}
279
+ {/snippet}
280
+ </Calendar>
281
+ ```
282
+ It can also be passed as a property, which is convenient when the snippet is declared elsewhere:
283
+ ```html
284
+ <Calendar plugins={[DayGrid]} {options} eventContent={myEventContent}/>
285
+ ```
286
+ A snippet receives the same argument as the function form of the option and is rendered in the same place.
287
+
288
+ Unlike a function, a snippet is rendered by Svelte itself. It can contain components, event handlers and transitions, and it is updated reactively when the state it uses changes.
289
+
290
+ If both a snippet and an option with the same name are given, the snippet takes precedence. The `noEventsContent` snippet is the only one that receives no argument.
291
+
262
292
  ### Standalone bundle
263
293
  This bundle contains a version of the calendar that includes all plugins and is prepared for use in the browser via the `<script>` tag.
264
294
 
265
295
  The first step is to include the following lines of code in the `<head>` section of your page:
266
296
  ```html
267
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.11.0/dist/event-calendar.min.css">
268
- <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.11.0/dist/event-calendar.min.js"></script>
297
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.12.0/dist/event-calendar.min.css">
298
+ <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.12.0/dist/event-calendar.min.js"></script>
269
299
  ```
270
300
 
271
301
  <details>
@@ -345,6 +375,8 @@ The default text
345
375
  </tr>
346
376
  </table>
347
377
 
378
+ In a Svelte component, this content can also be provided as a [snippet](#content-snippets).
379
+
348
380
  ### allDaySlot
349
381
  - Type `boolean`
350
382
  - Default `true`
@@ -697,6 +729,8 @@ If the current view is a resource view, the [Resource](#resource-object) object
697
729
  </tr>
698
730
  </table>
699
731
 
732
+ In a Svelte component, this content can also be provided as a [snippet](#content-snippets).
733
+
700
734
  ### dayCellFormat
701
735
  - Type `object` or `function`
702
736
  - Default `{day: 'numeric'}`
@@ -1032,6 +1066,8 @@ The current [View](#view-object) object
1032
1066
 
1033
1067
  In case the function returns `undefined`, the event will be rendered in the default way.
1034
1068
 
1069
+ In a Svelte component, this content can also be provided as a [snippet](#content-snippets).
1070
+
1035
1071
  ### eventDidMount
1036
1072
  - Type `function`
1037
1073
  - Default `undefined`
@@ -2118,6 +2154,8 @@ The default text like `+2 more`
2118
2154
  </tr>
2119
2155
  </table>
2120
2156
 
2157
+ In a Svelte component, this content can also be provided as a [snippet](#content-snippets).
2158
+
2121
2159
  ### noEventsClick
2122
2160
  - Type `function`
2123
2161
  - Default `undefined`
@@ -2162,6 +2200,8 @@ function () {
2162
2200
  }
2163
2201
  ```
2164
2202
 
2203
+ In a Svelte component, this content can also be provided as a [snippet](#content-snippets).
2204
+
2165
2205
  ### nowIndicator
2166
2206
  - Type `boolean`
2167
2207
  - Default `false`
@@ -2373,6 +2413,8 @@ The associated [Resource](#resource-object) object
2373
2413
  </tr>
2374
2414
  </table>
2375
2415
 
2416
+ In a Svelte component, this content can also be provided as a [snippet](#content-snippets).
2417
+
2376
2418
  ### resourceLabelDidMount
2377
2419
  - Type `function`
2378
2420
  - Default `undefined`
@@ -2930,6 +2972,8 @@ function (arg) {
2930
2972
  </tr>
2931
2973
  </table>
2932
2974
 
2975
+ In a Svelte component, this content can also be provided as a [snippet](#content-snippets).
2976
+
2933
2977
  ### weekNumbers
2934
2978
  - Type `boolean`
2935
2979
  - Default `false`
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * EventCalendar v5.11.0
2
+ * EventCalendar v5.12.0
3
3
  * https://github.com/vkurko/calendar
4
4
  */
5
5
  .ec{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ec-color-400:oklch(70.8% 0 0);--ec-color-300:oklch(87% 0 0);--ec-color-200:oklch(92.2% 0 0);--ec-color-100:oklch(97% 0 0);--ec-color-50:oklch(98.5% 0 0);--ec-bg-color:#fff;--ec-text-color:currentcolor;--ec-border-color:var(--ec-color-300);--ec-button-bg-color:var(--ec-bg-color);--ec-button-border-color:var(--ec-border-color);--ec-button-text-color:var(--ec-text-color);--ec-button-active-bg-color:var(--ec-color-200);--ec-button-active-border-color:var(--ec-color-400);--ec-button-active-text-color:var(--ec-button-text-color);--ec-today-bg-color:oklch(98.7% .026 102.212);--ec-highlight-color:oklch(98.4% .019 200.873);--ec-event-bg-color:oklch(70.7% .165 254.624);--ec-event-text-color:#fff;--ec-bg-event-color:var(--ec-color-300);--ec-bg-event-opacity:.3;--ec-event-col-gap:.375rem;--ec-now-indicator-color:oklch(63.7% .237 25.331);--ec-popup-bg-color:var(--ec-bg-color)}.ec-dark .ec{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ec-color-400:oklch(43.9% 0 0);--ec-color-300:oklch(37.1% 0 0);--ec-color-200:oklch(26.9% 0 0);--ec-color-100:oklch(20.5% 0 0);--ec-color-50:oklch(14.5% 0 0);--ec-bg-color:var(--ec-color-100);--ec-today-bg-color:oklch(28.6% .066 53.813);--ec-highlight-color:oklch(30.2% .056 229.695);--ec-bg-event-opacity:.5}@media (prefers-color-scheme:dark){.ec-auto-dark .ec{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ec-color-400:oklch(43.9% 0 0);--ec-color-300:oklch(37.1% 0 0);--ec-color-200:oklch(26.9% 0 0);--ec-color-100:oklch(20.5% 0 0);--ec-color-50:oklch(14.5% 0 0);--ec-bg-color:var(--ec-color-100);--ec-today-bg-color:oklch(28.6% .066 53.813);--ec-highlight-color:oklch(30.2% .056 229.695);--ec-bg-event-opacity:.5}}.ec-day{--ec-day-bg-color:var(--ec-bg-color);background-color:var(--ec-day-bg-color);border:1px solid var(--ec-border-color);border-block-start:none;border-inline-start:none}.ec-day.ec-today{--ec-day-bg-color:var(--ec-today-bg-color)}.ec-day.ec-highlight{--ec-day-bg-color:var(--ec-highlight-color)}.ec-time-grid .ec-body .ec-day{background-image:linear-gradient(to top, var(--ec-day-bg-color) 1px, transparent 1px), linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px), linear-gradient(to right, var(--ec-day-bg-color) 1px, transparent 1px), linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px);background-size:100% 100%, 100% calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity)), 2px 100%, 100% var(--ec-slot-height)}.ec-timeline:not(.ec-month-view,.ec-year-view) .ec-body .ec-day{--ec-last-line-color:transparent;--ec-direction:to left}[dir=rtl] :is(.ec-timeline:not(.ec-month-view,.ec-year-view) .ec-body .ec-day){--ec-direction:to right}.ec-timeline:not(.ec-month-view,.ec-year-view) .ec-body .ec-day{background-image:linear-gradient(var(--ec-direction), var(--ec-last-line-color) 1px, transparent 1px), linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px), linear-gradient(var(--ec-day-bg-color) 1px, transparent 1px), linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px);background-size:100% 100%, calc(var(--ec-slot-width) * var(--ec-slot-label-periodicity)) 100%, 100% 2px, var(--ec-slot-width) 100%;border-inline:none}.ec-timeline:not(.ec-month-view,.ec-year-view) .ec-body .ec-day.ec-no-ieb{--ec-last-line-color:var(--ec-day-bg-color)}.ec-day-grid .ec-day{flex-direction:column;justify-content:space-between;min-block-size:5em;display:flex}.ec-day-grid .ec-uniform .ec-day{min-block-size:auto}.ec-list .ec-day{border-inline:none}.ec-list .ec-day:last-child{border:none}.ec-day.ec-no-ieb{border-inline-end:none}.ec-day.ec-no-beb{border-block-end:none}.ec-day-head{flex-direction:row-reverse;justify-content:space-between;display:flex}.ec-day-grid.ec-month-view .ec-day-head{padding:.375rem}.ec-day.ec-other-month .ec-day-head time{opacity:.3}.ec-list .ec-day-head{background-color:var(--ec-day-bg-color);border-block-end:1px solid var(--ec-border-color);flex-direction:unset;z-index:2;margin:0 0 -1px;padding:.5em 1.5em;position:sticky;inset-block-start:0}.ec-day-foot{padding:.18rem;font-size:.85em}.ec-day-foot a{cursor:pointer}.ec-disabled{position:relative}.ec-disabled:after{content:"";background-color:var(--ec-bg-event-color);opacity:var(--ec-bg-event-opacity);position:absolute;inset:0}.ec-toolbar{justify-content:space-between;align-items:center;margin-block-end:1em;display:flex}.ec-toolbar>*{flex-wrap:wrap;gap:.5rem .75rem;display:inline-flex}.ec-title{margin:0}.ec-button{background-color:var(--ec-button-bg-color);border:1px solid var(--ec-button-border-color);border-radius:.25rem;padding:.375rem .75rem;font-size:1rem;line-height:1.5}.ec-button:not(:disabled){color:var(--ec-button-text-color);cursor:pointer}.ec-button:not(:disabled):hover,.ec-button.ec-active{background-color:var(--ec-button-active-bg-color);border-color:var(--ec-button-active-border-color);color:var(--ec-button-active-text-color);z-index:1}.ec-button-group{vertical-align:top;display:inline-flex}.ec-button-group .ec-button:not(:first-child){border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:-1px}.ec-button-group .ec-button:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.ec-icon{inline-size:1em;display:inline-block}.ec-icon.ec-prev:after,.ec-icon.ec-next:after{content:"";border-block-start:2px solid;border-inline-end:2px solid;block-size:.5em;inline-size:.5em;display:inline-block;position:relative}.ec-icon.ec-prev:after{inset-inline-start:3px;rotate:-135deg}[dir=rtl] .ec-icon.ec-prev:after{rotate:135deg}.ec-icon.ec-next:after{inset-inline-start:-3px;rotate:45deg}[dir=rtl] .ec-icon.ec-next:after{rotate:-45deg}.ec-sidebar{z-index:1;background-color:var(--ec-bg-color);border-inline-end:1px solid var(--ec-border-color);text-align:end;position:sticky;inset-inline-start:0;overflow:clip}.ec-header .ec-sidebar{border-block-end:1px solid var(--ec-border-color);padding-block:.375rem}.ec-time-grid .ec-sidebar{padding-inline:.75rem}.ec-time-grid .ec-body .ec-sidebar{--ec-direction:to left}[dir=rtl] :is(.ec-time-grid .ec-body .ec-sidebar){--ec-direction:to right}.ec-time-grid .ec-body .ec-sidebar{background-image:linear-gradient(var(--ec-direction), transparent .375rem, var(--ec-bg-color) .375rem), linear-gradient(to top, var(--ec-bg-color) 1px, transparent 1px), linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px), linear-gradient(to right, var(--ec-bg-color) 1px, transparent 1px), linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px);background-size:100% 100%, 100% 100%, 100% calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity)), 2px 100%, 100% var(--ec-slot-height)}.ec-timeline .ec-body .ec-sidebar{grid-area:1/1/-1/2;grid-template-rows:subgrid;display:grid}.ec-row-head{border-block-end:1px solid var(--ec-border-color);min-block-size:1.5em;padding:.375em .75rem;display:flex}.ec-row-head:last-child{border:none}.ec-expander{inline-size:1.25em;margin-block-start:-1px;margin-inline-end:.25em}.ec-expander .ec-button{aspect-ratio:1;block-size:1.25em;padding:0;line-height:normal}.ec-slot{white-space:nowrap}.ec-time-grid .ec-slot{block-size:calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity));position:relative;inset-block-start:-.5lh}.ec-timeline .ec-slot{grid-column:span var(--ec-slot-label-periodicity);text-overflow:ellipsis;padding:.18rem 0;font-size:.95em;overflow:clip}.ec-slots{grid-auto-flow:column;grid-auto-columns:var(--ec-slot-width);text-align:center;--ec-day-bg-color:var(--ec-bg-color);background-color:var(--ec-day-bg-color);border-block-end:1px solid var(--ec-border-color);display:grid}.ec-slots.ec-today{--ec-day-bg-color:var(--ec-today-bg-color)}.ec-slots.ec-highlight{--ec-day-bg-color:var(--ec-highlight-color)}.ec-slots{--ec-last-line-color:transparent;--ec-direction:to left}[dir=rtl] .ec-slots{--ec-direction:to right}.ec-slots{background-image:linear-gradient(var(--ec-direction), var(--ec-last-line-color) 1px, transparent 1px), linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px);background-size:100% 100%, calc(var(--ec-slot-width) * var(--ec-slot-label-periodicity)) 100%}.ec-slots:last-child{--ec-last-line-color:var(--ec-day-bg-color)}.ec-events{grid-area:1/2/-1/-1;grid-template:subgrid / subgrid;isolation:isolate;pointer-events:none;display:grid}.ec-day-grid .ec-events{grid-column-start:1}.ec-event{color:var(--ec-event-text-color);box-sizing:border-box;box-shadow:0 0 1px 0 var(--ec-border-color);background-color:var(--ec-event-bg-color);z-index:1;pointer-events:all;inline-size:calc(100% - var(--ec-event-col-gap));border-radius:3px;padding:2px;font-size:.85em;line-height:1.5;display:flex;position:relative}.ec-time-grid .ec-event{grid-row:1}.ec-day-grid .ec-event,.ec-all-day .ec-event,.ec-timeline .ec-event{block-size:max-content;margin-block-end:var(--ec-event-col-gap)}:is(.ec-day-grid .ec-event,.ec-all-day .ec-event,.ec-timeline .ec-event).ec-start-clipped{border-start-start-radius:0;border-start-end-radius:3px;border-end-end-radius:3px;border-end-start-radius:0}:is(.ec-day-grid .ec-event,.ec-all-day .ec-event,.ec-timeline .ec-event).ec-end-clipped{border-start-start-radius:3px;border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:3px}.ec-list .ec-event{color:inherit;background-color:var(--ec-day-bg-color);border-radius:0;flex-direction:row;padding:.5em 1.5em}.ec-event.ec-preview{z-index:1000;-webkit-user-select:none;user-select:none;opacity:.8}.ec-event.ec-pointer{color:inherit;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;box-shadow:none}.ec-event.ec-start-clipped{border-start-start-radius:0;border-start-end-radius:0}.ec-event.ec-end-clipped{border-end-end-radius:0;border-end-start-radius:0}.ec-event.ec-start-clipped.ec-end-clipped{border-radius:0}.ec-bg-event{background-color:var(--ec-bg-event-color);opacity:var(--ec-bg-event-opacity);grid-row:1;position:relative}.ec-draggable{cursor:pointer;-webkit-user-select:none;user-select:none}.ec-ghost{opacity:.5;-webkit-user-select:none;user-select:none;pointer-events:none}.ec-event-body{flex-direction:column;inline-size:100%;display:flex}.ec-day-grid .ec-event-body,.ec-all-day .ec-event-body,.ec-timeline .ec-event-body{flex-direction:row}.ec-event-tag{border-radius:2px;inline-size:4px;margin-inline-end:8px}.ec-event-time{white-space:nowrap;flex-shrink:0;max-block-size:100%;margin:0 0 1px;overflow:hidden}.ec-day-grid .ec-event-time,.ec-timeline .ec-event-time{text-overflow:ellipsis;max-inline-size:100%;margin:0 3px 0 0}.ec-event-title{font-weight:inherit;margin:0;overflow:hidden}.ec-time-grid .ec-event-title{position:sticky;inset-block-start:var(--ec-header-height)}.ec-day-grid .ec-event-title,.ec-all-day .ec-event-title,.ec-timeline .ec-event-title{white-space:nowrap;text-overflow:ellipsis;min-block-size:1.5em;position:sticky;inset-inline-start:calc(var(--ec-sidebar-width) + .18em)}.ec-list .ec-event-title{font-size:1rem}.ec-resizer{-webkit-user-select:none;user-select:none;position:absolute}.ec-time-grid .ec-body .ec-resizer{cursor:ns-resize;block-size:50%;max-block-size:8px;inset:auto 0 0}.ec-time-grid .ec-body .ec-resizer.ec-start{inset:0 0 auto}.ec-day-grid .ec-resizer,.ec-all-day .ec-resizer,.ec-timeline .ec-resizer{cursor:ew-resize;inline-size:50%;max-inline-size:8px;inset:0 0 0 auto}:is(.ec-day-grid .ec-resizer,.ec-all-day .ec-resizer,.ec-timeline .ec-resizer).ec-start{inset:0 auto 0 0}.ec-dragging,.ec-dragging *{cursor:pointer!important}.ec-resizing-y,.ec-resizing-y *{cursor:ns-resize!important}.ec-resizing-x,.ec-resizing-x *{cursor:ew-resize!important}.ec-no-events{text-align:center;background-color:var(--ec-bg-color);padding:5em 0}.ec-now-indicator{pointer-events:none;will-change:inset;grid-row:2;position:relative}.ec-time-grid .ec-now-indicator{border-block-start:var(--ec-now-indicator-color) solid 2px;block-size:0;inline-size:100%}.ec-timeline .ec-now-indicator{border-inline-start:var(--ec-now-indicator-color) solid 2px;inline-size:0}.ec-timeline .ec-now-indicator:before{z-index:2;inset-block-start:calc(var(--ec-header-height) - 6.5px)}.ec-now-indicator:before{background:var(--ec-now-indicator-color);content:"";block-size:12px;inline-size:12px;z-index:1;border-radius:50%;margin-block-start:-7px;margin-inline-start:-7px;display:block;position:sticky;inset-inline-start:calc(var(--ec-sidebar-width) - 6.5px)}.ec-popup{box-sizing:border-box;background-color:var(--ec-popup-bg-color);border:1px solid var(--ec-border-color);block-size:max-content;min-block-size:8em;inline-size:125%;min-inline-size:12em;box-shadow:var(--ec-color-300) 0 10px 15px -3px, var(--ec-color-300) 0 4px 6px -4px;border-radius:.25rem;flex-direction:column;padding:.375rem .75rem .75rem;display:flex;position:relative}.ec-popup .ec-day-head{flex-direction:row;padding-inline:0}.ec-popup .ec-day-head a{cursor:pointer;font-size:1.5em;line-height:.8}.ec-popup .ec-events{--ec-event-col-gap:0;pointer-events:auto;display:block;overflow-y:auto}.ec-custom-scrollbars .ec-main::-webkit-scrollbar{background-color:#0000}.ec-custom-scrollbars .ec-main::-webkit-scrollbar-thumb{box-shadow:none;background-color:var(--ec-border-color);background-clip:padding-box;border:4px solid #0000;border-radius:8px}.ec-custom-scrollbars .ec-main::-webkit-scrollbar-thumb:hover{background-color:var(--ec-color-400)}.ec{flex-direction:column;display:flex}.ec-main{border:1px solid var(--ec-border-color);display:grid;overflow:auto}.ec-time-grid .ec-main{grid-template-columns:max-content repeat(var(--ec-grid-cols), var(--ec-col-width));grid-template-rows:repeat(2,max-content)}.ec-day-grid .ec-main{--ec-row-height:auto;grid-template-columns:repeat(var(--ec-grid-cols), minmax(0, 1fr));grid-template-rows:max-content repeat(var(--ec-grid-rows), var(--ec-row-height))}.ec-day-grid .ec-main.ec-uniform{--ec-row-height:minmax(0, 1fr);flex-grow:1;overflow:hidden}.ec-timeline .ec-main{grid-template-columns:max-content repeat(var(--ec-grid-cols), min-content);grid-template-rows:max-content var(--ec-grid-rows);flex-grow:1}.ec-timeline:is(.ec-month-view,.ec-year-view) .ec-main{grid-template-columns:max-content repeat(var(--ec-grid-cols), var(--ec-col-width))}.ec-header{grid-area:1/1/2/-1;grid-template-columns:subgrid;z-index:2;display:grid;position:sticky;inset-block-start:0}.ec-grid{grid-area:1/1/-1/-1;grid-template-columns:subgrid;display:grid}.ec-body .ec-grid{grid-template-rows:subgrid}.ec-time-grid .ec-grid,.ec-timeline .ec-grid{grid-column-start:2}.ec-all-day{grid-area:2/1/auto/-1;grid-template-columns:subgrid;min-block-size:var(--ec-slot-height);display:grid}.ec-col-group{grid-column:span var(--ec-col-group-span)}.ec-col-group,.ec-col-head{text-align:center;background-color:var(--ec-bg-color);border:1px solid var(--ec-border-color);text-overflow:ellipsis;border-block-start:none;border-inline-start:none;padding:.375rem .18em;overflow:clip}:is(.ec-col-group,.ec-col-head).ec-today{background-color:var(--ec-today-bg-color)}:is(.ec-col-group,.ec-col-head).ec-highlight{background-color:var(--ec-highlight-color)}.ec-col-group:nth-last-child(1 of .ec-col-group),.ec-col-head:nth-last-child(1 of .ec-col-head){border-inline-end:none}.ec-col-group>*,.ec-timeline .ec-col-head>*{position:sticky;inset-inline-start:calc(var(--ec-sidebar-width) + .18em)}.ec-body{grid-area:2/1/-1/-1;grid-template:subgrid / subgrid;display:grid}.ec-hidden{visibility:hidden}